Site was fine until viewed through Mozilla...

So I have something like this...

<top portion of logo <top portion of an image> >
<bottom portion of logo <bottom portion of an image> >

If you can understand what I was trying to show above, the top and bottom portions of the image are actually contained in the top and bottom portions of the logo respectively. I float the portions of the image right and everything works perfectly in IE/Safari. In Mozilla, the portions of the image aren't at all in the correct place, not even close. Here's the relevant code and I've attached 2 screenshots - a mozilla and a safari. This ones killing me so if anyone has any advice I'd be eternally grateful.

(logotop and logobottom refer to logo.
skewedwatchtop and skewedwatchbottom refer to image)

#logotop
{
background-color: #fff;
border-right: 0px solid #000;
border-top: 0px solid #000;
border-left: 0px solid #000;
border-bottom: 0px solid #000;
height: 56px;
}

#logobottom
{
background-color: #fff;
border-right: 0px solid #000;
border-top: 0px solid #000;
border-left: 0px solid #000;
border-bottom: 1px solid #000;
height: 19px;
clear:left;
}

#logotop #skewedwatchtop
{
background-color: transparent;
margin-top:0px;
margin-right:0px;
height:56px;
float:right;
width:400px;
}

#logobottom #skewedwatchbottom
{
background-color: transparent;
border-bottom:1px solid #000;
margin-top:0px;
margin-right:0px;
height:19px;
float:right;
widdth:400px;
}

In the HTML I'm using code as such:
<div id="logotop"><img src="../images/cyrano_logo_top_trans.gif" alt="Cyrano, Inc." width="316" height="56" />
<div id="skewedwatchtop"><img src="../images/skewed_watch_top_cropped.png" alt="Cyrano, Inc." width="400" height="56" /></div>
</div>
<div id="logobottom"><img src="../images/cyrano_logo_bottom_trans.gif" alt="Cyrano, Inc." width="316" height="19" />
<div id="skewedwatchbottom"><img src="../images/skewed_watch_bottom_cropped.png" alt="Cyrano, Inc." width="400" height="19" /></div>
</div>