Site working fine on Chrome not on IE or Firefox

HTML & CSS
,
1

Hi my site looks great on Chrome and for most of it looks good on firefox and IE however I have a news part which has different news stories. I’m using a grid system so I have 3 stories each in 3 separate columns and 1 row. My problem is on firefox and IE the margin-bottom for the columns aren’t separating the columns and their joining together which doesn’t look great.

below is what it looks like on Chrome and is what i want it to look like on every browser.

1042×393 169 KB

below is what its looking like on firefox as you can see the margin-bottom isn’t working.

1045×432 214 KB

Heres the peice of css im splitting the columns up with which works on chrome but has no effect firefox:

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

Any help would be much appreciated

2

The screen shots are helpful, but more code would be appreciated.

We need to see some HTML and a fair bit more of the CSS that creates those green blocks.

Perhaps you would prefer to create a CodePen or post a link to your site.

3

Thanks for your reply. Heres a url to show my news page http://betterclimates.com/

4

Firefox has a bug with vertical percentages on flex items so use px instead.

.the-news{margin-bottom:20px}

(Vertical margins in percentage are usually nonsense anyway as that refers to the width of the containing block rather than anything to do with height.)

5

is it anything to do with me using flexbox?

6

Yes that’s what I just said:)

7

yep just re-read your message. My bad :smile:

1 Like
8

should i delete the :

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

which was seperating before?

9

I think Paul said to change the % values in the margin to px.
The float: left is redundant in flex because it gets overridden, but is possibly there as a fallback for non-flex browsers. Though I prefer to use display: inline-block as a flex fallback, as floats can be trouble makers. Not sure if that will mess up the “grid system” elsewhere though.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.