Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    FireFox adding a margin to the top of images

    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:

    Code:
    /* 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
    Last edited by jacofunk; 12-18-2006 at 05:01 PM. Reason: Some Links Disabled...Problem Fixed

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •