PDA

View Full Version : Resolved CSS error. IE shows page fine but FireFox and Chrome have errors



simon14
Sep 16th, 2009, 11:09 AM
I made a website many years ago and now the guys i made it for want me to take a look into an issue we are experiencing.

The issue is that in IE, the website looks fine but in Chrome/Firefox, it's positioned all wrong.

The website in question is www.wardrobeorganiser.co.nz

Please see image links below for screenshots

IE
http://wardrobeorganiser.co.nz/images/IE.JPG

Chrome
http://wardrobeorganiser.co.nz/images/Chrome.JPG


I have no idea why this is occruing. If it helps, here is the CSS files: (in txt formate for easy reading)

http://wardrobeorganiser.co.nz/CSS.txt

Hope someone can shine some light onto this issue.... thanks guys :)

SB65
Sep 16th, 2009, 12:59 PM
If it's right in IE but wrong in FF then there's a problem with the code somewhere.

re #box4 - FF and Chrome are correctly rendering the div as 579px wide - width of 539px plus (2 lots of) 20px padding. IE7 is not adding the padding to the width of the element.

This suggests a problem with the doctype - which causes IE7 to do odd things. Checking, you doctype is incomplete: replace it with:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Now IE7 is "wrong" as well - but it's the same as FF, and both can be fixed by amending the width of #box4 in your css to 499px. Similarly the width of #box7 can be amended.

simon14
Sep 16th, 2009, 02:19 PM
Thanks so much, i had no idea the DOCTYPE thing was wrong...

Really appreciate the help.

Cheers :)