A Digital Age Deserves A Digital Leader

Problem with IE 6 and divs

Problem with IE 6 and divs

Postby gries818 » Thu Jul 31, 2008 1:30 pm

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!
Image

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Postby gries818 » Thu Jul 31, 2008 5:45 pm

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).
Image

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Postby bigt0242000 » Thu Jul 31, 2008 11:59 pm

Wouldn't it be easier to use an IF statement to switch style sheets instead of using javascript?
Image
Image
PRO Level 2
Posts: 19
Joined: Thu Jun 17, 2004 12:55 am
Location: Rome, GA

Postby gries818 » Tue Aug 05, 2008 2:16 pm

bigt0242000 wrote:Wouldn't it be easier to use an IF statement to switch style sheets instead of using javascript?


Is that even compatible with Firefox? I've never even heard of that.
Image

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Postby bigt0242000 » Tue Aug 05, 2008 9:23 pm

IE is the only one that reads the If statements. See here.
Image
Image
PRO Level 2
Posts: 19
Joined: Thu Jun 17, 2004 12:55 am
Location: Rome, GA

Postby gries818 » Tue Aug 05, 2008 9:52 pm

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

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Postby bigt0242000 » Wed Aug 06, 2008 2:05 am

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.
Image
Image
PRO Level 2
Posts: 19
Joined: Thu Jun 17, 2004 12:55 am
Location: Rome, GA

Postby gries818 » Wed Aug 06, 2008 5:26 pm

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

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Postby kanaloa » Wed Aug 06, 2008 5:43 pm

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.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: HI & SC
Real Name: John Derrick

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 3 guests

cron
cron