3 replies [Last post]
dlorimer
Offline
newbie
MA, USA
Last seen: 15 years 51 weeks ago
MA, USA
Joined: 2003-07-22
Posts: 9
Points: 0

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site was fine until viewed through Mozilla...

Hi dlorimer,
Are you using a valid doctype?
Can you post a link to an example page?

Anonymous
Anonymous's picture
Guru

link to page

http://test.cyrano.com/legacy/
user:reviewer
pass:critic

Here's a link to the page in question. It should render fine in IE and Safari but not Mozilla. Thanks again. I'll look into the doctype.

dlorimer
Offline
newbie
MA, USA
Last seen: 15 years 51 weeks ago
MA, USA
Joined: 2003-07-22
Posts: 9
Points: 0

...

I'm still struggling with this mozilla problem. Does anyone have any ideas? As mentioned, mozilla murders my page though all other browsers render it fine. The issue seems to be with images in a div that are contained in a div.