CSS problem

Hej Eksperter.

Er i gang med at sætte et design op for en bekendt, og er støt på et problem, jeg ikke kan løse. Fejlen er enkel og ses i Mozilla Firefox - det er højre marg der er gal. Resultat skal gerne ligne sådan som layoutet ser ud i IE.

Layoutet kan ses på www.sjfoto.dk/demo/

Jeg har oprettet et tidligere spørgsmål, i en anden kategori uden held (http://www.eksperten.dk/spm/839893) og beder derfor om hjælp her. Som der antages i det andet spørgsmål, må det være IE der tolker CSS'en forkert, siden det er den eneste browser som viser det rigtigt. Spørgsmålet er så: Hvor/Hvad er fejlen?

Mit stylesheet er som følger:

/* CSS */

/* Body Structure */
body{
    background-color:#000000;
}
#container{
    text-align:center;
}
#layout{
    margin:36px auto 36px auto;
    padding:0px 21px 21px 21px;
    background-color:#FFFFFF;
    width:740px;
}
#topbg{
    background-image:url("images/sjfoto_layoutbg.gif");
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    width:698px;
    height:21px;
}
#topfooter{
    text-align:right;
    background-image:url("images/sjfoto_footsbg.gif");
    background-position:top;
    width:698px;
}
#logo{
    margin-bottom:1px;
    background-image:url("images/sjfoto_logo.gif");
    background-color:#000000;
    width:698px;
    height:122px;
}
#menuline{
    margin-bottom:21px;
    text-align:center;
    background-image:url("images/sjfoto_menulinebg.gif");
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    width:698px;
}
#content{
    text-align:left;
    width:698px;
}
#menu{
    margin-right:21px;
    background-image:url("images/sjfoto_menubg.gif");
    background-position:top;
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    float:left;
    width:140px;
    height:118px;
}
#main{
    background-color:#FFFFFF;
    float:left;
    width:537px;
}
#bottomfooter{
    text-align:left;
    background-color:#FFFFFF;
    clear:both;
    width:698px;
}
/* End Body Structure */

På forhånd tak.
Frederik