webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
737 stars 63 forks source link

innowavesummit.com - Table design is broken #18623

Closed geroter closed 5 years ago

geroter commented 6 years ago

URL: http://innowavesummit.com/home-en/#section_schedule

Browser / Version: Firefox 62.0 Operating System: Windows 10 Tested Another Browser: Yes

Problem type: Design is broken Description: Table doesn't display properly Steps to Reproduce: Clicking on "Full Schedule" an overlay comes up with a table of the conference schedule. In Firefox the text overflows the rows, in Chrome it displays properly. Screenshot Description

From webcompat.com with ❤️

geroter commented 6 years ago

This is what it looks like in Chrome.

Screenshot Description

softvision-sergiulogigan commented 6 years ago

I can reproduce this as well, on Windows 10 and Firefox Nightly 64.

image

This is where the magic happens:

<div class="verticalcolumn1 buisiness">
    <table class="vertical1">
        <tbody>
            <tr class="vertrow1">
                <th class="rowheader">Innovation hall</th>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>7:30 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Registration</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>9:00 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Opening and Welcome Address</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>9:05 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Norman Winarsky "The Story of Siri and Predictions of the Next AI Breakthroughs"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>9:35 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Marc Wesselink - Startupbootcamp"Evaluating Early Stage Ideas"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:05 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Thomas P. Offner - PWH "How can startups and corporates work together - i.e. how to get innovations and emerging technologies from startups into the corporation"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:35 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Coffee Break</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:50 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Mike Doherty "Building that Startup Ecosystem "</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>11:15 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>European Commision Pannel: CEE Digital Innovations with Matej Rus (Startup Slovenia),Ernest Jenavs (Edurio, LV), Svilen Rangelov (Dronamics, BG), Barnabás Málnay (EIT Digital, HU), Moderator: Diana Rusu (Spherik Accelerator, RO)
</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>12:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>George Roter - Mozilla Speaker "Democratizing Speech Technologies through Open Innovation: Mozilla Common Voice "</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>12:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Business Lunch with the Speakers</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>1:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Nuno Varandas - F6S "#GiveFirst business model"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>2:05 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Jens Lapinski "Evaluating Early Stage Ideas"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>2:40 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Marc ALBISSER - SpaceX "How Blockchain will revolutionize space exploration"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>3:10 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Coffee Break</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>3:25 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Baybars Altuntas - WBAIF "Financial Road Map of Entrepreneurs from Startup to Scaleup to Exit"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>4:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Marius Ghenea</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>4:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>VC Discussion panelist</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>5:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Isidro Laso - European Commision</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>5:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span> Discussion panel 1 with </span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>6:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Closure</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>7:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Innowave Summit 2018 Cocktail</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>8:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Gala Dinner with Speakers and Investors (Ultra ViP Pass Only)</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Varna Night Life Program</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="vertical1">
        <tbody>
            <tr class="vertrow1">
                <th class="rowheader">Business hall</th>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>7:30 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Registration</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>9:00 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Opening and Welcome Address from the Mariya Gabriel - European Commissioner for Digital Economy and Society and Ivan Portnih - Mayor of Varna.
</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>9:30 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Dr. Fahim Kibria - "Value Driven Marketing”
</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:20 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Coffee Break</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:35 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Denis Rothman "Boosting e-business with Blockchain artificial intelligence "</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>11:10 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Jacobo Toll-Messia "News Verification and Blockchain"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>11:35 AM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Monica Miteva - The next industrial revolution. How e-commerce is transforming B2B</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>12:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Bojidar Krapchev - Amazon Speaker</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>12:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Business Lunch with the Speakers</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>1:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Andrew Weld-Moore - Facebook Speaker</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>2:05 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Pavel Safarik - ROI Hunter - Facebook Ads platform</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>2:40 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Dirk Lubbers</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>3:10 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Coffee Break</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>3:25 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Ian Moyse "How to approach increased customer expectations in 2018"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>4:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Thomas Cochran "Digital transformation at the White House during the Obama administration""</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>4:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Oana Calugar "Objective and Key Results = the Operating System for Digital Transformation"</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>5:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>European Commision Pannel: Women in tech in Western Balkans with Tatjana Kalezic (Startup Serbia, RS), Sara Lerota (Spark Accelerator Bosnia, BIH), Migena Muslli (Albanian Investment Development Agency (AIDA), AL), Hana Qerimi (Shkolla Digjitale Prishtina, Kosovo), Jasna Trengoska (Girls in Tech Mac</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>5:30 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Digital Marketing trends Discussion panel with Dr. Fahim Kibria,  Thomas Cochran, Andrew Weld-Moore (Facebook) and Ian Moyse</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>6:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Closure</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>7:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Innowave Summit 2018 Cocktail</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>8:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Gala Dinner with Speakers and Investors (Ultra ViP Pass Only)</span>
                    </div>
                </td>
            </tr>
            <tr class="datarow1 even_class">
                <td class="single_row ws-item-2">
                    <div class="ws-item-title ws-item-title-2">
                        <span>10:00 PM</span>
                    </div>
                    <div class="schedule_description full_width">
                        <span>Varna Night Life Program</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
softvision-sergiulogigan commented 6 years ago

Thanks, @geroter for this report! We're taking a look at it.

karlcow commented 6 years ago

ok I found the culprit. I still wonder why the webdev chose to do that, but

.single_row {
    height: 1px;
}

explodes the design. It seems it was to be able to draw lines to separate the cells and basically it was decided to use div inside a unique td, instead of separating them in between th/td

Either they could do it properly with table cells. or use display: flex inside the td.

Moving to needscontact.

Still pinging @dholbert for the rendering difference, but here I think the chosen solution is really looking for interop issues.

dholbert commented 6 years ago

Yeah, this is a weird difference. It's covered in https://bugzilla.mozilla.org/show_bug.cgi?id=1461852 .

The site probably wants to remove that height:1px that you found -- or perhaps, if they depend on it somewhere to make some empty row be 1px tall rather than 0px tall (I imagine that's the only effect of this CSS in Chrome), then maybe they really want min-height:1px? That'd probably do the same thing without busting Firefox by forcing a height that's smaller than the content.

adamopenweb commented 5 years ago

Reaching out to headoffice@bbforums.bg

adamopenweb commented 5 years ago

This issue has been fixed. Thanks everyone!