Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No background color or border in IE

    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.

    Code:
    <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:
    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

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I fixed the typo Still doesn't work.

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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •