Problem with IE 6 and divs
9 posts
• Page 1 of 1
Problem with IE 6 and divs
I'm having a rather confusing problem that I can't quite figure out with IE 6. My divs in IE 6 aren't lining up correctly and nothing seems to make them work in IE 6. The worst part is that they work perfectly in Firefox and IE 7.
Here is the problem in IE 6:
<a href="http://img145.imageshack.us/img145/6860/crazyie6erroraw7.png"><img src="http://img145.imageshack.us/img145/6860/crazyie6erroraw7.png" width="250"></a>
Here are screenshots of it displaying correctly in IE 7 and Firefox:
<a href="http://img227.imageshack.us/img227/3273/firefoxek1.png"><img src="http://img227.imageshack.us/img227/3273/firefoxek1.png" width="250"></a>
<a href="http://img440.imageshack.us/img440/7156/ie7fb3.png"><img src="http://img440.imageshack.us/img440/7156/ie7fb3.png" width="250"></a>
Here is the code that I'm using:
<b>HTML</b>
- Code: Select all
<DOCTYPE>
<html>
<head>
<title>Design</title>
<link>
</head>
<body>
<div class="sidebar_align">
<table><tr><td><div class="sidebar_top"></div></td></tr>
<tr><td><div class="sidebar">
<center><div class="sidebar_inner_top"></div>
<div class="sidebar_inner"></div>
<div class="sidebar_inner_bottom"></div></center></div></td></tr>
<tr><td><div class="sidebar_bottom"></div></td></tr></table>
<div class="spacer_sidebar"></div>
<div class="sidebar_top"></div><div class="sidebar">
<center><div class="sidebar_inner_top"></div>
<div class="sidebar_inner"></div>
<div class="sidebar_inner_bottom"></div></center>
</div><div class="sidebar_bottom"></div></div>
<div>
<div class="main_top"></div><div class="main">
<center><div class="main_inner_top"></div>
<div class="main_inner"></div>
<div class="main_inner_bottom"></div></center>
</div><div class="main_bottom"></div>
</div>
</body>
</html>
You'll notice that the first div grouping is inside a table. I did this because this technique has worked in the past to get around IE 6's crappy rendering. It doesn't work for whatever reason in this case. <b>NOTE: Removing the doctype makes IE 7 mess up like IE 6... Firefox is still fine though.</b>
<b>CSS</b>
- Code: Select all
/* General styling */
body
{
margin:0px;
padding:0px;
}
a
{
text-decoration:none;
}
/* sidebar styling */
.sidebar_align
{
float:left;
position:absolute;
top:10px;
left:10px;
}
.sidebar_top
{
background-image:url("images/sidebar_top.png");
height:5px;
width:300px;
background-repeat:no-repeat;
}
.sidebar
{
background-position:top;
background-color:#d8451a;
width:300px;
height:267px;
}
.sidebar_bottom
{
background-image:url("images/sidebar_bottom.png");
height:5px;
width:300px;
background-repeat:no-repeat;
}
.sidebar_inner_top
{
background-image:url("images/sidebar_inner_top.png");
background-repeat:no-repeat;
width:290px;
height:5px;
}
.sidebar_inner
{
background-color:White;
width:290px;
height:257px;
}
.sidebar_inner_bottom
{
background-image:url("images/sidebar_inner_bottom.png");
background-repeat:no-repeat;
width:290px;
height:5px;
}
.spacer_sidebar
{
height:10px;
width:300px;
}
/* main */
.content_container
{
padding-left:10px;
}
.main_top
{
background-image:url("images/main_top.png");
background-repeat:no-repeat;
width:650px;
height:5px;
}
.main
{
background-color:#d8451a;
width:650px;
height:553px;
}
.main_bottom
{
background-image:url("images/main_bottom.png");
background-repeat:no-repeat;
width:650px;
height:5px;
}
.main_inner_top
{
background-image:url("images/main_inner_top.png");
background-repeat:no-repeat;
width:640px;
height:5px;
}
.main_inner
{
background-color:White;
width:640px;
height:543px;
}
.main_inner_bottom
{
background-image:url("images/main_inner_bottom.png");
background-repeat:no-repeat;
width:640px;
height:5px;
}
Thanks for the help!
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
After some personal research I came across the solution. Apparently you can get around this problem in IE 6 by setting margin-top in affected classes as a a negative pixel height (to undo the offset top). Some additional tweaking is needed to make it display completely the same as it does in IE 7.
This workaround does present a problem however. While it fixes IE 6, it will screw up IE 7 and Firefox (and I'm sure other browsers). My solution to this problem is to make two separate CSS files and switch them with Javascript depending on the browser (IE 6 and IE 7/Firefox).
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
bigt0242000 wrote:IE is the only one that reads the If statements. See here.
Yeah then it would be a problem because I need to use one stylesheet for IE 7 and Firefox and one for IE 6.
I'll post my javascript later so anyone can use it.
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
How much of the stylesheet has to be redone?
You could use "if IE 6" and then stick what you need for it inside of a style tag.
You could use "if IE 6" and then stick what you need for it inside of a style tag.
- bigt0242000
- Posts: 19
- Joined: Thu Jun 17, 2004 12:55 am
- Location: Rome, GA
bigt0242000 wrote:How much of the stylesheet has to be redone?
You could use "if IE 6" and then stick what you need for it inside of a style tag.
that's true I guess. Here's the solution I came up with:
- Code: Select all
var browser = navigator.appVersion;
if (browser.substring(17,25) == "MSIE 6.0") {
document.writeln("<link>");
}
else {
document.writeln("<link>");
}
Works just as well - and it can be applied to multiple pages more easily - and that's kinda the point of CSS to begin with. Thanks for the suggestion of "if" tags... I'm sure I can find a use for them at a later point
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
IE6 is notorious for screwing up CSS code. I hate it with a passion. IE7 has some issues too, but IE6 took the cake. If Microsoft would make their darn browsers standards compliant, this wouldn't be an issue. Instead we have to "hack" our code or put in redundant code.
The if statements are your best bet. I use them and most other developers I know do too.
The if statements are your best bet. I use them and most other developers I know do too.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
- kanaloa
- President
- Posts: 11795
- Joined: Sun Mar 10, 2002 1:18 am
- Location: HI & SC
- Real Name: John Derrick
9 posts
• Page 1 of 1
Return to HTML, CSS, and Scripts
Who is online
Users browsing this forum: No registered users and 4 guests