[RESOLVED] IE giving trouble as usual - HTML Forums

Mortar · 10-28-2009, 08:52 AM

So, I'm working on another website. Works fine in Firefox, but Internet Explorer is being an ass as usual. The "content" for some reason wants to position itself under the "right" div when using IE instead of between the "left" and "right" divs.

Here's the link.
Any idea how to fix this?

Mortar · 10-30-2009, 10:25 AM

Anyone?

Excavator · 10-30-2009, 10:50 AM

Hello Mortar,
Your box Model is off.

Your #main is the width of your #right and #content.
#right is a set width plus padding plus border
#content should be margined over the total width of #right

#left is a set width plus padding plus border
#main should be margined over the total width of #left

This might get you closer -

Code:

#left {
background:#2b2b2b;
float:left;
width:288px;
padding-left:20px;
padding-right:20px;
padding-top:3px;
border-right:1px solid #414141;
}
#main {
position:relative;
margin: 0 0 0 329px;
}
#right {
background:#2b2b2b;
float:right;
width:288px;
padding-left:20px;
padding-right:20px;
padding-top:3px;
border-left:1px solid #414141;
}
#content {
background:#2b2b2b;
padding-left:20px;
padding-right:20px;
padding-top:3px;
width:288px;
border-right:1px solid #414141;
border-left:1px solid #414141;
margin: 0 329px 0 0;
}

There is plenty more to fix!
Check your site in the validator - see the links in my sig below.

The biggest thing I see is you are re-using id's that should be classes.

capturetr · 10-30-2009, 11:30 AM

thank you. i will share this to youtube

Mortar · 10-30-2009, 11:41 AM

Thanks. You're right about the re-using of id's, I always forget they should be classes if I want to create more of them, lol!

Mortar · 10-30-2009, 02:09 PM

OK, another problem popped up. The footer doesn't feel like moving down when the "left" div becomes larger, it just stays there. I think it's got something to do with the "float:left;" I gave to the "left" div, but is there a way to make the footer move down with it?

http://sw-gm.com/Afrit%208/subpage%201.html

Pegasus · 10-30-2009, 03:37 PM

Try adding clear: both; to the CSS for your footer. That should be the first thing.

Mortar · 10-31-2009, 11:41 AM

Tried it, didn't do anything.

Excavator · 10-31-2009, 11:58 AM

Need to clear your floats - #wrap {
background:#2b2b2b;
min-height:100%;
width:986px;
margin:auto;
position:relative;
overflow: auto;
}

Here's a site that explains how that works - http://www.quirksmode.org/css/clearing.html

Mortar · 11-01-2009, 06:32 AM

Hey, that did it. Thanks a lot.