CODEWITHSUNDEEP
htmlcssfirefox
kosher
kosher

Reputation: 333

UL element rendering differently in Firefox

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?

Upvotes: 0

Views: 282

Answers (3)

kosher
kosher

Reputation: 333

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.

Upvotes: 0

hhoburg
hhoburg

Reputation: 383

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.

Upvotes: 1

David
David

Reputation: 801

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.

Upvotes: 0

Related Questions