CSS error. IE shows page fine but FireFox and Chrome have errors

Forums › IT Pro and developers › CSS error. IE shows page fine but FireFox and Chrome have errors

simon14

1889 posts

Uber Geek

Trusted

#41482 16-Sep-2009 20:55

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, it's positioned all wrong.

Please see image links below for screenshots

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

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

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

itxtme

2102 posts

Uber Geek

#256281 16-Sep-2009 21:03

Might be better off heading over to a coding forum for some help, good one i frequent is http://www.codingforums.com/index.php

freitasm

BDFL - Memuneh
79265 posts

Uber Geek

Administrator

ID Verified

Trusted

Geekzone

Lifetime subscriber

#256292 16-Sep-2009 21:45

I am moving this to the DEVELOPMENT forum, where it belongs.

chiefie

I iz your trusted friend
5877 posts

Uber Geek

Retired Mod

Trusted

Lifetime subscriber

#256304 16-Sep-2009 22:10

I think you'll find that IE is actually rendering it incorrectly due to the malform doctype which causes IE to revert back to quirk mode.

From the look of it, it looks like it is a general issue of box-model problem between IE-quirkmode and modern/standards compliant browsers.

Internet is my backyard...

«Geekzone blog: Tech 'n Chips Takeaway» «Personal blog: And then...»

Please read the Geekzone's FUG

manhinli

2483 posts

Uber Geek

Trusted

#256307 16-Sep-2009 22:16

Looks like you haven't recognised how width is defined in CSS.

See: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Remember: padding IS NOT included when calculating width.

Find me on Twitter!

I posted 1, 2 x 10^3 times!

_Allan

153 posts

Master Geek

Trusted

#256320 16-Sep-2009 22:57

I'm thinking you can do one of two things.
(1) Spend a considerable amount of time trying to get your position elements correct. If you checked out the web site using Firefox you would find it looks like the Chrome brower. The really sad part about it is Chrome and Firefox are displaying the sites correctly and it's IE that is not! As a rule you should really develop a web site with firefox if you want to deploy the correct standards and when it looking good then test it using IE and make the appropiate adjustments.
(2) This option is easier to impliment and you could move on to something else and that is lose the positioning attibutes and use DIV (or Table instead). Not what modern development rules encourage but heck it works and 80% of sites out there deploy Div / Table instead of Postion

__Allan

_Allan (my blog, my tweets, company tweets, company web site)
Geekzone Speedtest - Download: 16.28 mbps Upload: 5.86 Mbps

simon14

1889 posts

Uber Geek

Trusted

#256337 17-Sep-2009 00:30

itxtme: Might be better off heading over to a coding forum for some help, good one i frequent is http://www.codingforums.com/index.php

Thanks for the link., the issue is now fixed thanks to the following response:

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:

Code:
<!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.

chiefie

I iz your trusted friend
5877 posts

Uber Geek

Retired Mod

Trusted

Lifetime subscriber

#256396 17-Sep-2009 09:57

Yup... like I said; doctype was malformed and hence IE switches back to quirk mode which happens to look "right" but it isn't as shown by all standards-compliant browers when doctype is corrected.

Simon, key thing to know when using absolute positioning (or float etc)... that the element is taken out of the context of its parenting element, in another word, it is no longer part of the canvas/document that the parent element is holding. So with Float, the parent element will collapse if there is no other actual element physically reside in it. HOWEVER IE will always shown to "contain" them.

There's a lot of caveats and gotcha in web development, especially when going full standards-compliant, but knowing these caveats, soon you'll find it's actually quite a breeze to develop website - I said develop, not design as two are different in nature.

Enjoy coding!

Internet is my backyard...

«Geekzone blog: Tech 'n Chips Takeaway» «Personal blog: And then...»

Please read the Geekzone's FUG

Samsung

Shop now on Samsung phones, tablets, TVs and more (affiliate link).

simon14

1889 posts

Uber Geek

Trusted

#256400 17-Sep-2009 10:13

chiefie: Yup... like I said; doctype was malformed and hence IE switches back to quirk mode which happens to look "right" but it isn't as shown by all standards-compliant browers when doctype is corrected.

Simon, key thing to know when using absolute positioning (or float etc)... that the element is taken out of the context of its parenting element, in another word, it is no longer part of the canvas/document that the parent element is holding. So with Float, the parent element will collapse if there is no other actual element physically reside in it. HOWEVER IE will always shown to "contain" them.

There's a lot of caveats and gotcha in web development, especially when going full standards-compliant, but knowing these caveats, soon you'll find it's actually quite a breeze to develop website - I said develop, not design as two are different in nature.

Enjoy coding!

Thanks so much for taking the time to explain this.

Appreciate it, cheers :)