Need Help with IE 6 Compatibility

Discussion in 'HTML & Website Design' started by Masterful, May 16, 2008.

  1. #1
    I discovered the other day that my site, Coupons To Your Inbox, looks messed up on IE 6:

    IE 6 Screenshot

    [​IMG]

    The logo transparency issue at the top has now been fixed. What I can't fix is the positioning of the opt-in box on the right. It's touching the main box on the left . There's supposed to be a space between them. How can I fix this without affecting how my site looks in newer browsers?

    Here's the CSS:

    body{
    margin:0;
    padding:0;
    font:84% Helvetica, Arial, Sans-serif;
    background:#ffffff;
    color:#000000;
    }
    
    #container{
    width:1000px;
    margin:0 auto;
    padding:0;
    color:#000000;
    }
    
    #header{
    width:1000px;
    float:inherit;
    margin-right:auto; 
    margin-left:auto; 
    padding:0;
    background:#ffffff url(img/gradient-header.png) repeat-x;
    }
    
    [COLOR="Green"][B]#main{
    width:600px;
    float:left;
    margin-left:80px; 
    padding:0 0 15px 0;
    background:#ffffff;
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    border-left:1px solid #cccccc;
    display:inline;
    }[/B][/COLOR]
    
    [COLOR="Red"][B]#right{
    width:211px;
    float:right;
    margin-right:80px; 
    padding:0 0 15px 0;
    background:#ffffff;
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    border-left:1px solid #cccccc;
    }[/B][/COLOR]
    
    #footer{
    width:840px;
    float:inherit;
    margin-right:auto; 
    margin-left:auto; 
    padding:5px 0 5px 0;
    font-size:0.9em;
    text-align:center;
    background:#e6ede7;
    color:#000000;
    }
    Code (markup):
     
    Masterful, May 16, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Remove the white space above the DOCTYPE. It's throwing IE 6 into Quirks Mode.
     
    Dan Schulz, May 16, 2008 IP
  3. Masterful

    Masterful Well-Known Member

    Messages:
    1,653
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #3
    Thanks for the response, Dan. The space that you referred to contains a PHP script which works server-side. I heard that, as it works server-side, the space cannot be seen by browsers, hence they are not provoked into quirks mode. Is that not true?

    More importantly, however, do you have an answer for my question above?
     
    Masterful, May 17, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It's not true. Anything (whether it be an XML declaration, a Byte Order Mark, or even whitespace) above an XHTML DOCTYPE will force IE 6 into Quirks Mode.

    If I were you, I'd modify that PHP script so that it doesn't create the white space. Even if it means calling it and the DOCTYPE on the same line in your editor.
     
    Dan Schulz, May 17, 2008 IP