Firefox Renders Different From Safari & Chrome


#1

Hello,

I am a amateur web developer taking my first shot at building a site from scratch.

I was previewing my HTML file in Google Chrome up until now and I decided to run a quick check across a few browsers to make sure it rendered correctly.

In Safari and Chrome there were no issues and everything looked great, but in Firefox many of the divs were not in their correct places, some were slightly off and others were way out of place.

Why would Firefox render px’s and em’s differently than Chrome and Safari? (I understand FF uses Gecko and Safari and Chrome use WebKit, but pixels are pixels right?)

What can I do to fix this issue? Would I need to write a second stylesheet for FF? I thought about using browser hacks but that didn’t seem like the best solution.

you can download the HTML and CSS files here for a look at my code:

HTML File

CSS File

Any help you can provide would be great!

Thanks,

-Nick

PS: I know the design looks really bad right now but I am just working on basic shape before I stylize anything, just looking for feedback on how to fix the FF rendering issue.


#2

Try including css reset at the beginning of your css file: http://www.cssreset.com/


#3

OriginalEXE,

I tried the css reset code but it just made all the divs out of place instead of just a few.


#4
glutenfree4u said

OriginalEXE,

I tried the css reset code but it just made all the divs out of place instead of just a few.

Then it means your entire code is really bad :slight_smile:


#5
RubenBristian said
glutenfree4u said

OriginalEXE,

I tried the css reset code but it just made all the divs out of place instead of just a few.

Then it means your entire code is really bad :slight_smile:

It shows up great in Chrome / Safari though, I did some googling and many people say FireFox displays the pixels differently than most browsers.

Should I attach a 2nd CSS file that just applies to FF? how would I do that?

Thanks


#6
glutenfree4u said
RubenBristian said
glutenfree4u said

OriginalEXE,

I tried the css reset code but it just made all the divs out of place instead of just a few.

Then it means your entire code is really bad :slight_smile:

It shows up great in Chrome / Safari though, I did some googling and many people say FireFox displays the pixels differently than most browsers.

Should I attach a 2nd CSS file that just applies to FF? how would I do that?

Thanks

Have no time for checking your code now, but I've never faced such problem, since you are only a beginner, most probably you are doing something wrong. I also learned by trial & error so nothing to get frustrated about.

#7

Chrome and Safari use the same layout engine (webkit) and the layout engine while FF uses gecko. It’s up to engine to decide the default things like left-margin of the li elements and a number of other things. You must use css reset in order to reset those default values so that every layout engine displays the same (similar enough) thing or else you are making a website for particular layout engine.


#8

I found / fixed the issue.

I needed to add

overflow: hidden;


to the containing divs to make it display correctly in Firefox.

Thanks for the help guys.


#9

Sounds more like you just needed a clearfix. overflow:hidden is not an optimal clearfix solution, as it has other obvious side-effects.


#10

At the top of your CSS file define properties for: html, body, a, a:hover, p, img, headings (h1, h2, h3, h4, h5, h6) etc. If your code is good you don’t need to use CSS reset, ofcourse you will need to use separate css files for IE7, IE8 and somethimes for IE9 but ofcourse not entire css, only fix for elements which are not rendered properly. Best luck :wink: