Hi,

I'm having a problem with how my site looks in IE 6. It looks fine in Firefox and IE 7, but not in IE 6.

This is how it looks in IE 6: http://www.alphaberrydesign.com/images/alphaberryie.jpg

and this is how it should look: http://www.alphaberrydesign.com/images/alphaberryff.jpg

This is my CSS code:

/* CSS Document */

body  {background-color:#A1554B;
      font-family:Arial, Helvetica, sans-serif;
      color:#624318;
      font-size:12px;
      margin:0px;
      }
      
#page-container {width:790px;
                 margin:auto;
                 }

#header {margin:0px;
         }
         
#title-top {margin:0px;
              }
              
#contact-sidebara {width:175px;
                   float:left;
                   margin:0px 0px 0px 96px;
                   height:184px;
                   }
                   
#contact-sidebarb {width:175px;
                   float:right;
                   margin:0px 96px 0px 0px;
                   height:184px;
                   }                             
         
#contentcontainer-contact {background-image:url(images/berrymiddle.gif);
                           width:790px;
                           padding-top:20px;
                           }
                  
#content-contact {width:403px;
                  margin-right:175px;
                  padding-top:20px;
                  margin:0px 280px 0px 105px;
                  }          

#contentcontainer-faq {background-image:url(images/berrymiddle.gif); 
                       width:790px;
                       padding-top:20px;
                       height:735px;
                       margin:auto;
                       }
                       
#content-faq {width:450px;
              margin-right:122px;
              padding-top:20px;
              margin:0px 122px 0px 105px;
              }
              
#sidebar-faq {width:122px;
              float:right;
              margin:0px 96px 0px 0px;
              }                                     

#container-index {background-image:url(images/berrymiddle.gif); 
                  width:790px;
                  }
              
#content-index {width:455px;
                margin-right:112px;
                padding-top:20px;
                margin:0px 122px 0px 105px;
                }
                
#sidebar-index {width:112px;
                float:right;
                margin:0px 96px 0px 0px;
                }    


#container-portfolio {background-image:url(images/berrymiddle.gif); 
                      width:790px;
                      }    
                
#content-portfolio {width:570px;
                    padding-top:20px;
                    margin-right:110px;
                    margin-left:110px;
                    }
                    
#container-price {background-image:url(images/berrymiddle.gif); 
                  width:790px;        
                  }    
                  
#content-price {width:570px;
                padding-top:20px;
                margin-left:110px;
                }                                            
                
#container-sevices {background-image:url(images/berrymiddle.gif); 
                  width:790px;        
                  }    
                  
#content-services {width:450px;
                   margin-right:122px;
                   padding-top:20px;
                   margin:0px 122px 0px 105px;
                   }
                
#sidebar-services {width:122px;
                  float:right;
                  margin:0px 96px 0px 0px;
                  }                                                    
                
#services-sidea {width:130px;
                 float:left;
                 }

#services-sideb {width:130px;
                 float:right;
                 }        
                 
#servicea1 {width:450px;
            margin:0px 122px 0px 105px;
            }                                          
                
#servicesa2 {width:130px;
             margin:0px 0px 0px 110px;
             }
                
#footer {
         }                   

h1 {margin:0px;
    padding:0px;
    }
    
h2 {margin:0px;
    padding:0px;
    }    

h3 {margin:0px;
    padding:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }

.centeralign {text-align:center;
              }



A:link{color:#DA8D83;text-decoration:none}
A:visited{color:#DA8D83;text-decoration:none}
A:active{color:#DA8D83;text-decoration:none}
A:hover{color:#000000;text-decoration:none}    


form {width:380px;
      margin:0px;
      padding:0px;
      margin:auto;
      font-family:Arial, Helvetica, sans-serif;
      color:#624318;
      }

form fieldset {border-color:#624318;
               border-width:1px;
               border-style:solid;
               padding-top:0px;
               padding-left:10px;
               padding-right:10px;
               padding-bottom:0px;
               margin:0px;
               }

textarea {overflow:auto;
          }
          
form label { 
    display: block;
    float: left; 
    width: 135px;
    margin: 5px 0 0 0;
    color:#624318;
}      

form legend {color:#624318;
             }

.padding-form {padding-top:10px;
               }
          
               
.sentpage {font-size:16px;
           color:#F3EBE2;
           text-align:center;
           font-weight:bold;
           font-weight:bolder;
           margin-top:40px;
           }

Any help, or links to good tutorials would be fantastic. Thank you!

I have been able to fix the problem using two style sheets, one for IE 6 and then one for IE 7.

This is the code I am using:

<!--[if IE 6]>
<link rel="stylesheet" href="alphaberryoldie.css" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="alphaberrystyle.css" type="text/css">
<![endif]--> 
<link rel="stylesheet" href="alphaberrystyle.css" type="text/css" />

Now it works perfectly in IE 6 when I remove what is bolded above ^, however, it doesn't work in Firefox when I remove that.

Does anyone know why this is happening? It's probably staring me right in the face, but I can't see it yet Thank you!

I dont know much about conditional statements in regards to stylesheets, but it looks to me that if you remove that bold line, FF has no idea what stylesheet to use. Since your conditional statements are for IE, FF sees nothing.

Yes, you're very right. When I remove that line, FF doesn't know what to use.

<link href="alphaberrystyle.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" href="alphaberryoldie.css" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="alphaberrystyle.css" type="text/css">
<![endif]-->

Do you think a code like this would work?

It will work...except that you don't need the IE7 comment. The reason you don't need it is because it's already defined as your default stylesheet beforehand.

The key is order in this case. CSS will process in the order (top to bottom) in which you stack the stylesheets. So if you use conditional statements for stylesheets, put them after the default stylesheets.

Wonderful, thank you! So could I set it up like this:

<link href="alphaberrystyle.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="alphaberryoldie.css" type="text/css">
<![endif]-->

It appears to work fine, but I like to double check

Absolutely! Now you're on the trolley.

Thank you!

Firefox IGNORES conditional comments, only IE will 'see' them.

I've had a quick look at your site and I think your sidebar-index div is suffering from the margin/float problem that bugged IE6. It effectively means it doubles the margin on the same side of the float so your other content gets shifted down.

You can fix it with display inline. Bin the IE6 conditional css

#sidebar-index {
width:112px;
float:right;
margin:0px 96px 0px 0px;
display: inline;
}

That works perfectly too, thank you!

Maxxximus is correct. The dreaded IE6 margin doubling. I ususally end up with an IE6 only stylesheet that looks like this:

#thing_one, #thing_two, #thing_three, #thing_four {
display: inline;
}