CODEWITHSUNDEEP
cssgoogle-chromefirefox
Siddharth Thevaril
Siddharth Thevaril

Reputation: 3798

Table and Table-cell working differently in Chrome and Firefox

I'm working on this website.

If you open it on Chrome everything is displayed as intended.

At the footer of the website, you will see 8 logos which fit perfectly. If you open it using Mozilla Firefox, the logo list extends beyond the website container.

Below are the 2 pictures -

Chrome : enter image description here1

Firefox : enter image description here

The logos are inside a ul as list items

and the CSS is like this

.clients ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: table;
}

.clients ul li {
    display: table-cell;
}

How should I fix this?

Upvotes: 0

Views: 1109

Answers (3)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

This is actually a difference in how the images' widths are calculated inside of the table, and not the table elements themselves.

Tables make sure that all content is visible, so if it cannot shrink or wrap its contents then it expands past 100%. Chrome figures out that the images can shrink and adjusts the table width thereafter, while Firefox uses the full widths of the images to calculate the width of the table.

Almost ironically, setting width: 100% on the images will force Firefox to behave in the same fashion as Chrome.

Edit: As a footnote, your "table" structure isn't completely right. It doesn't seem to cause any layout issues in this particular case, but you should make sure to always have the proper table > tbody > tr > td hierarchy to prevent weird behaviour.

Upvotes: 1

maioman
maioman

Reputation: 18762

if you want all eight logos in the row you could give them a fixed width of 12.5%

otherwise set

.img-responsive{
display: block;
width: 100%;
/*max-width: 100%;*/
height: auto;
}

Upvotes: 0

Manoj Babu Balaraman
Manoj Babu Balaraman

Reputation: 217

make table-layout: fixed

.clients ul{
 table-layout: fixed
}

Upvotes: 1

Related Questions