243 posts
  • Grew a moustache for the Envato Movember competition
  • Sold between 1 and 100 dollars
  • Contributed a Tutorial to a Tuts+ Site
  • Has been a member for 2-3 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • United States
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.

1466 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

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

243 posts
  • Grew a moustache for the Envato Movember competition
  • Sold between 1 and 100 dollars
  • Contributed a Tutorial to a Tuts+ Site
  • Has been a member for 2-3 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • United States
glutenfree4u says

OriginalEXE,

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

3433 posts Ruben Bristian
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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 :)

243 posts
  • Grew a moustache for the Envato Movember competition
  • Sold between 1 and 100 dollars
  • Contributed a Tutorial to a Tuts+ Site
  • Has been a member for 2-3 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • United States
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

1466 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
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.
939 posts
  • Sold between 1 000 and 5 000 dollars
  • Most Wanted Bounty Winner
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Envato Studio (Microlancer) Beta Tester
  • Serbia
  • Exclusive Author
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.

243 posts
  • Grew a moustache for the Envato Movember competition
  • Sold between 1 and 100 dollars
  • Contributed a Tutorial to a Tuts+ Site
  • Has been a member for 2-3 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • United States
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.

3422 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • Has been a member for 4-5 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+4 more
sevenspark Volunteer 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
  • Has been a member for 1-2 years
  • 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