No background color or border in IE

belledumonde

12-11-2006, 12:25 PM

I don't get it. Here's the basic relevant markup and style declarations, hope someone can help me out. I'd like not to include a link to the actual page because it's a blog and uh, well you know. I hope this is enough. Just save the first bit of code as whatever.htm then the second bit as style2.css in the same folder then open it up in IE6.

<html>
<head><title>Not happy</title><link rel="stylesheet" href="style.css"></head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="sidebar">
<div class="wide">Add a whole bunch of text here enough to make the page scroll vertically and you'll see what happens in IE.</div>
<div class="narrow">Or here too. Just anywhere in the sidebar.</div>
<div class="narrow"></div>
<div class="clearer"></div>
</div>
<div id="footer"></div>
<body>
</html>

body {
margin: 0;
padding: 0;
font: 90%/1.5em tahoma;
}

#header, #content, #sidebar, #footer {
min-width: 500px;
margin: 0 !important;
}

#header {
background-color: #F7F7DE;
border-left: #F7DBDE 1px solid;
border-right: #F7DBDE 1px solid;
border-bottom: #F7E6DE 10px solid !important;
border-top: #F7E6DE 15px solid !important;
text-align: center;
padding: 0;
}

#content {
padding: 0 10% 2%;
background-color: #FFFFF4;
border-bottom: 15px solid #F7ECDE;
border-top: 15px solid #F7ECDE;
}

#sidebar {
padding: 8px 0 0;
font-size: 90%;
background-color: #F7DBDE;
border-top: #F7E6DE 15px solid;
border-bottom: #F7E6DE 15px solid;
}

#sidebar .wide {
width: 47%;
float: left;
margin: 0;
padding: 12px 15px 0 20px;
background-color: tranpsparent;
}

#sidebar .narrow {
width: 23%;
float: left;
padding: 12px 5px 5px;
margin: 0;
background-color: tranpsparent;
}

#footer {
clear: both;
padding: 5px 0;
text-align: center;
background-color: #F7F7DE;
border-bottom: 15px solid #F7ECDE;
border-top: 15px solid #F7ECDE;
}

.clearer {
clear:both; height:1px;
overflow:hidden;
padding: 0 0 10px 0;
margin: -1px 0 0;
}

See it? Does anyone know what's going on and how to fix it? Thanks :)

Arbitrator

12-11-2006, 12:41 PM

I didn’t test your document, but I can tell you that Internet Explorer 6 doesn’t support the min-width property and that you misspelled the transparent keyword twice.

belledumonde

12-11-2006, 01:25 PM

Ok, I fixed the typo :) Still doesn't work.

And I don't think it's got something to do with the min-width?

Excavator

12-11-2006, 07:27 PM

Hello belledumonde,
I'm not sure but I think it's working now.
"transparent" is not a valid CSS switch. Just leave that out.
When sizing with percentages I think you need to give the body a size so the percentage sized element has something to base it's size off of. I think that's what was causing it?

I changed this:

body {
margin: 0;
padding: 0;
font: 90%/1.5em tahoma;
height: 100%;
width: 100%;
}
#sidebar {
font-size: 90%;
background-color: #F7DBDE;
border-top: #F7E6DE 15px solid;
border-bottom: #F7E6DE 15px solid;
width: 100%;
padding-top: 8px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}

#sidebar .wide {
width: 47%;
float: left;
margin: 0;
padding: 12px 15px 0 20px;
}

#sidebar .narrow {
width: 23%;
float: left;
padding: 12px 5px 5px;
margin: 0;
}

Working here under Vista and XP with IE6, IE7 and FF2