No background color or border in IE

Discussion in 'CSS' started by belledumonde, Dec 11, 2006.

0
  1. #1
    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>
    Code (markup):
    
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;
}
    Code (markup):
    See it? Does anyone know what's going on and how to fix it? Thanks :)
     
    belledumonde, Dec 11, 2006 IP
  2. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Are you sure that it's style2.css because you link to style.css, no 2 in there. And I just named my files test.html and style.css and both IE and FF display identical pages.

    [​IMG]
     
    crazybjörn, Dec 11, 2006 IP
  3. belledumonde

    belledumonde Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hello, thanks for the quick reply and sorry about that. I have some typos in there including the background-color: transparent thing but if you correct that it still doesn't work. you have to copy/paste the text till it's long enough to make the page scroll vertically then you'll see the problem. do you see it now?
     
    belledumonde, Dec 11, 2006 IP
  4. pachecus

    pachecus Well-Known Member

    Messages:
    1,841
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    110
    #4
    there is a mistake in this word
    background-color: tranpsparent;
     
    pachecus, Dec 11, 2006 IP
  5. belledumonde

    belledumonde Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Oh yeah, I fixed that. Actually I removed it completely. I still can't get the background color to stay in IE.
     
    belledumonde, Dec 12, 2006 IP
  6. belledumonde

    belledumonde Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok, I fixed it by giving the parent div height: 1%; :)
     
    belledumonde, Dec 12, 2006 IP