...

View Full Version : FireFox adding a margin to the top of images



jacofunk
12-18-2006, 06:57 AM
This is the first time I've had trouble with FireFox and not IE. I'm using a very simple one-column CSS layout, containing a two-columned table so I don't have to worry about conflicting heights of using two CSS columns.

I've set both columns of the table to valign=top, but in FF, I get an extra 10 pixels or so of margin at the top before the image begins. I don't have that trouble with text or other elements. IE displays images at the proper height (no top margin).

If I put the image in its own class, using the image as the background of that class, then use the class in the column instead of the actual image via html, it lines up fine in FF. It only seems to not work properly when I put in an image to the top of the column using "plain old" html.

Here's an example (need to view in FF).

http://www.columbuscycling.com/baer/

This has the left "logo" in it's own div, and the right "sales logo" in the right column using simple html. See how the left image is higher than the right? *FIXED*



http://www.columbuscycling.com/baer/sales/

This again has the left "logo" in it's own div, and the CSS drop-down menu is placed at the top of the right column. No problem there. *FIXED*




Here is the CSS:


/* Layout Stylesheet */


body{
padding:0;
color: #333333;
width: 800px;
background-color: #000000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#header{
height: 24px;
margin-top: 20px;
background-image: url(images/top.jpg);
background-color: #000000;
background-repeat: no-repeat;
background-position: top;
}
#logo{
background-image: url(images/logo.png);
height: 220px;
}

#lh-col{
width: 765px;
height: auto;
background-color: #595959;
border-right-width: 5px;
border-left-width: 5px;
border-top-color: #ACACAC;
border-right-color: #ACACAC;
border-bottom-color: #ACACAC;
border-left-color: #ACACAC;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
background-position: top;
padding-left: 25px;
margin-top: 0;
padding-top: 0;
}

#footer{
height: 24px;
background-color: #000000;
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
}


Any help would be appreciated...I'm stuck!

Thanks

koyama
12-18-2006, 08:12 AM
The cause is that IE and FF have differing preassigned styles for the <p> element. IE has zero top margin for <p>, while FF has a positive top margin.

You are using images nested in paragraphs.


<p align="center"><img src="images/saleimage.png" alt="Sales Image" width="500" height="188" /></p>

Instead use <div> elements.

So it is not a bug in either of the two browsers.:)

jacofunk
12-18-2006, 04:01 PM
The cause is that IE and FF have differing preassigned styles for the <p> element. IE has zero top margin for <p>, while FF has a positive top margin.

You are using images nested in paragraphs.

Instead use <div> elements.

So it is not a bug in either of the two browsers.:)


Awesome, thank you so much. I learn something new every day!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum