Question

I’m having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I’m having is that I’m not sure how to change this while not messing up the way the nav bar looks.

The link is http://www.tamidgroup.org.

Any suggestions on a fix are much appreciated.

Answer 1

Definitely add a doctype in there. You could also target those browsers with a media query.

Example for chrome and safari

@media screen and (-webkit-min-device-pixel-ratio:0){
   //add your browser specific code here
}

That way you can target specific issues you see from one browser to the other.