Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.


simon14

1889 posts

Uber Geek

Trusted

#41482 16-Sep-2009 20:55
Send private message

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

Create new topic
itxtme
2102 posts

Uber Geek


  #256281 16-Sep-2009 21:03
Send private message

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
Send private message

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




Please support Geekzone by subscribing, or using one of our referral links: Samsung | AliExpress | Wise | Sharesies | Hatch | GoodSyncBackblaze backup


chiefie
I iz your trusted friend
5877 posts

Uber Geek

Retired Mod
Trusted
Lifetime subscriber

  #256304 16-Sep-2009 22:10
Send private message

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
Send private message

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
Send private message

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 blogmy tweetscompany tweetscompany web site)
           Geekzone Speedtest  -  Download: 16.28 mbps  Upload: 5.86 Mbps

simon14

1889 posts

Uber Geek

Trusted

  #256337 17-Sep-2009 00:30
Send private message

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
Send private message

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

 


 
 
 
 

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

1889 posts

Uber Geek

Trusted

  #256400 17-Sep-2009 10:13
Send private message

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

Create new topic





News and reviews »

Air New Zealand Starts AI adoption with OpenAI
Posted 24-Jul-2025 16:00


eero Pro 7 Review
Posted 23-Jul-2025 12:07


BeeStation Plus Review
Posted 21-Jul-2025 14:21


eero Unveils New Wi-Fi 7 Products in New Zealand
Posted 21-Jul-2025 00:01


WiZ Introduces HDMI Sync Box and other Light Devices
Posted 20-Jul-2025 17:32


RedShield Enhances DDoS and Bot Attack Protection
Posted 20-Jul-2025 17:26


Seagate Ships 30TB Drives
Posted 17-Jul-2025 11:24


Oclean AirPump A10 Water Flosser Review
Posted 13-Jul-2025 11:05


Samsung Galaxy Z Fold7: Raising the Bar for Smartphones
Posted 10-Jul-2025 02:01


Samsung Galaxy Z Flip7 Brings New Edge-To-Edge FlexWindow
Posted 10-Jul-2025 02:01


Epson Launches New AM-C550Z WorkForce Enterprise printer
Posted 9-Jul-2025 18:22


Samsung Releases Smart Monitor M9
Posted 9-Jul-2025 17:46


Nearly Half of Older Kiwis Still Write their Passwords on Paper
Posted 9-Jul-2025 08:42


D-Link 4G+ Cat6 Wi-Fi 6 DWR-933M Mobile Hotspot Review
Posted 1-Jul-2025 11:34


Oppo A5 Series Launches With New Levels of Durability
Posted 30-Jun-2025 10:15









Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.



Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.