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:
Any help you can provide would be great!
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.