UL element rendering differently in Firefox

Question

It appears that a ul element is rendering differently in Firefox than in Chrome and Safari. My site is Double Enders, and the ul element I am referring to constitutes the top menu (in devices above 1000px wide). As you can see, in Firefox, there is extra space above the menu, causing the entire middle section of the page to drop down. There is no such problem in the other browsers.

If I put overflow:auto on the parent div of the ul and then use position:relative and top:-20px, everything is aligned properly in FF, but not in the other browsers.

How can I get the menu to render consistently across browsers? And what is happening to cause this issue?

score 1 · Answer 1 · edited Feb 21 '18 at 22:25

1

Certain browsers have different styling; Chrome, Safari, Firefox, Internet Explorer, Opera, and other browsers can all render things differently. Check out this answer, which explores using CSS resets (Normalize.css in this case). It takes away those subtle differences so that you can develop on one browser and feel confident that your site will look the same on other browsers.

edited Feb 21 '18 at 22:25

kosher

335
3
13

answered Feb 21 '18 at 22:18

hhoburg

373
2
10

Thanks for pointing out CSS resets. I learned a lot that will be useful in future projects by going down that rabbit hole. – kosher Mar 03 '18 at 17:35

score 0 · Answer 2 · answered Feb 21 '18 at 22:24

You don't clear your floats in your middle column's menu. Clear them like so:

ul.menu::before, ul.menu::after {
    content: "\0020";
    display: table;
    clear: both
}

and then add no margin to the ul

ul.menu {
   margin-top: 0
}

It lines up your columns nicely.

score 0 · Answer 3 · answered Feb 22 '18 at 06:23

I had included the webkit browser prefixes where applicable in my CSS, but I had not actually used the CSS. So, while I had

ul {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
}

which eliminated the top and bottom margin on the ul on Safari and Chrome, I did not adjust the margin on FF. Adding

margin: 0;
padding: 0;

solved the immediate problem.

hhoburg's answer would be a useful way to proceed if I was just starting the project.

UL element rendering differently in Firefox

3 Answers3