Hi,

I am trying to convert a page to XHTML Strict, and it all validates, but it doesn't appear correctly in Firefox. It works correctly in IE though, and works correctly when it is transitional, and not strict.

This is how it is appearing in FF: http://www.alphaberrydesign.com/imag...errystrict.jpg

And this is how it should appear: http://www.alphaberrydesign.com/imag...ictcorrect.jpg

I've messed around with the codes, but I can't see why it is doing this when it validates as strict, and why it is doing this when it's strict and not when it's transitional.

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:auto;
         width:790px;
         }
         
#title-top {width:790px;
            margin:auto;
              }
              
#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;
              display: inline;
              }                                     

#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;
                display: inline;
                }


#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;
                  display: inline;
                  }                                                    
                
#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 {margin:0px;
         }        
                    
h1 {padding:0px;
    margin: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;
              }

img {border: none;}

.title-indexwidth {width:50px;
                   }

.table-indexwidth {width:435px;
                   }
                   
table.center {margin-left:auto; margin-right:auto;}            

.indextext-width {width:385px;
                  margin-left:60px;
                  }    
                  
.indexa-padding {padding-left:18px;
                 }
                 
.indexa1-padding {padding-left:25px;
                 }    
                 
.indexa2-padding {padding-left:15px;
                 }                                  
                 
.indexb-padding {padding-left:60px;
                 }                 
                                                          
.indexpadding {padding-left:25px;
               }

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 is always appreciated! Thank you!

This is just a guess at this point but I'm betting it has something to do with the difference between IE and FF and how they use the margin/padding differently.

add:

* {
margin: 0;
padding: 0:
}

To the beginning of the css file and then take out all the padding:0px and margin:0px that you have.

You also might have to define a couple of elements with padding and margin after, but it looks like you have already done it for the most part.

Have you got the site up where we can see ALL the code, including your images ?

Just a word to the wise - if it 'looks right' in IE and not in FF, then IE is usually doing it WRONG. Better to make it work right in FF FIRST, then kick IE until it's right.

Thank you for the responses!

Originally Posted by LadynRed

Have you got the site up where we can see ALL the code, including your images ?

Just a word to the wise - if it 'looks right' in IE and not in FF, then IE is usually doing it WRONG. Better to make it work right in FF FIRST, then kick IE until it's right.

Yes, the website is here: www.alphaberrydesign.com

And you're very right, it is best to make it work in FF first but I have no idea why it wouldn't be working.