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.




1863 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
1676 posts

Uber Geek

Subscriber

  # 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

 
 
 
 


I iz your trusted friend
5838 posts

Uber Geek

Mod Emeritus
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

 


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!

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



1863 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.


I iz your trusted friend
5838 posts

Uber Geek

Mod Emeritus
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

 


 
 
 
 




1863 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



Twitter and LinkedIn »



Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:





News »

Industry plan could create a billion dollar interactive games sector
Posted 19-Aug-2019 20:41


Personal cyber insurance a New Zealand first
Posted 19-Aug-2019 20:26


University of Waikato launches space for esports
Posted 19-Aug-2019 20:20


D-Link ANZ expands mydlink ecosystem with new mydlink Mini Wi-Fi Smart Plug
Posted 19-Aug-2019 20:14


Kiwi workers still falling victim to old cyber tricks
Posted 12-Aug-2019 20:47


Lightning Lab GovTech launches 2019 programme
Posted 12-Aug-2019 20:41


Epson launches portable laser projector
Posted 12-Aug-2019 20:27


Huawei launches new distributed HarmonyOS
Posted 12-Aug-2019 20:20


Lenovo introduces single-socket servers for edge and data-intensive workloads
Posted 9-Aug-2019 21:26


The Document Foundation announces LibreOffice 6.3
Posted 9-Aug-2019 16:57


Symantec sell enterprise security assets for US$ 10.7 billion to Broadcom
Posted 9-Aug-2019 16:43


Artificial tongue can distinguish whisky and identify counterfeits
Posted 8-Aug-2019 20:20


Toyota and Preferred Networks to develop service robots
Posted 8-Aug-2019 20:11


Vodafone introduces new Vodafone TV device
Posted 7-Aug-2019 17:16


Intel announces next-generation Intel Xeon Scalable processors with up to 56 cores
Posted 7-Aug-2019 15:41



Geekzone Live »

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


Support Geekzone »

Our community of supporters help make Geekzone possible. Click the button below to join them.

Support Geezone on PressPatron



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.

Alternatively, you can receive a daily email with Geekzone updates.