244 posts
  • Author Level 1
  • Beta Tester
  • Collector Level 3
  • Feedback Guru
+5 more
glutenfree4u
says

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.

1565 posts
  • Affiliate Level 1
  • Author Level 5
  • Collector Level 2
  • Featured Author
+2 more
OriginalEXE
says

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

244 posts
  • Author Level 1
  • Beta Tester
  • Collector Level 3
  • Feedback Guru
+5 more
glutenfree4u
says

OriginalEXE,

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

3804 posts
  • Elite Author
  • Author Level 11
  • Trendsetter
  • 7 Years of Membership
+12 more
KrownThemes
says

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 :)

244 posts
  • Author Level 1
  • Beta Tester
  • Collector Level 3
  • Feedback Guru
+5 more
glutenfree4u
says


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 :)

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

1565 posts
  • Affiliate Level 1
  • Author Level 5
  • Collector Level 2
  • Featured Author
+2 more
OriginalEXE
says



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 :)

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.
954 posts
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
  • Most Wanted Winner
+3 more
aleluja
says

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.

244 posts
  • Author Level 1
  • Beta Tester
  • Collector Level 3
  • Feedback Guru
+5 more
glutenfree4u
says

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.

3535 posts
  • Power Elite Author
  • Author Level 12
  • Trendsetter
  • United States
+13 more
sevenspark
Moderator
says

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

M_DesignAndDevelopment
M_DesignAndDevelopment Recent Posts Threads Started
12 posts
  • Serbia
  • 2 Years of Membership
  • Exclusive Author
M_DesignAndDevelopment
says

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 ;)

by
by
by
by
by
by