View Full Version : CSS Layout Broken with IE6
nicmo
12-04-2008, 04:59 PM
Hello, this is my first post here, i am not much of a CSS guru, i just finished a new layout and since i dont have IE6 i did not test it. Looks fine on IE7/Mozzilla.
This is the website:
http://www.bulletdrive.com/
This is the same website with IE6:
http://browsershots.org/png/original/10/10a7d3e108b8e35ea97d921c83e1eb80.png
The divs completly change their order! i am not sure what to do, can someone give me a hint if possible.
nicmo
12-04-2008, 09:23 PM
its not even respecting the z-index values... does IE6 have problems with those?
knives_out
12-04-2008, 09:35 PM
ie6 has problems with z-index & position:fixed.
start off by using xhtml strict ... that would probably solve a few problems right away.
nicmo
12-04-2008, 11:38 PM
i am sorry, what do you mean by using "xhtml strict" ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
using that ?
Snookerman
12-05-2008, 07:49 AM
i am sorry, what do you mean by using "xhtml strict" ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
using that ?
You also have to validate your page:
http://validator.w3.org/ (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bulletdrive.com%2F&charset=(detect+automatically)&doctype=Inline&group=0)
However, using xhtml strict does not necessarily mean your problem will be fixed any more than if you're using valid html transitional.
nicmo
12-05-2008, 04:17 PM
non of the errors are related to the problem...
Snookerman
12-05-2008, 04:34 PM
How do you know? Have to fixed them all and the problem still remains?
nicmo
12-11-2008, 11:18 PM
anyone else please?
monicasaha
12-15-2008, 06:29 AM
i have given a great thought to ur problem but could not solve it completely.
IE 6 is still not responding to the left nav bar position:fixed; rest i solved.
But i cannot send u the file here becoz it exceeds the attachment limits.
So if u r interested to get what i did.. u can give ur personal email-id..i can send the file to u.
Thanks
Snookerman
12-15-2008, 08:18 AM
IE6 has a problem with fixed position but you can use the star html hack for that, here is an article that explains how to do that:
http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ (http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/)
nicmo
12-15-2008, 02:39 PM
thank you Snookerman, that fixed the positioning of the divs... only small css bugs now on IE6 to fix.
what part did you fix monicasaha ?
Snookerman
12-15-2008, 02:51 PM
What are the remaining problems? Have you got a link to the newest page with the star html hack?
monicasaha
12-16-2008, 05:01 AM
Actually i tried to use that link..but it does not make any difference to me.
Snookerman
12-16-2008, 08:04 AM
@monica
Here is an example, I just used the code from the page I posted (http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/) and added some sample text. I tested it in IE6, IE7, FF3, Op9.6 and Chrome and they all worked:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed in all browsers</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.box {
position: fixed;
left: 10px;
top: 180px;
background:#0099FF;
}
* html .box {
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<p>All of your website content should be here.</p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box">
<p>This box is fixed.</p>
</div>
</body>
</body>
</html>
@nicmo
What css bugs ere you encountering? Please post a link to your latest page.
nicmo
12-19-2008, 01:56 PM
i think i have fixed everything. Thanks :)
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.