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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Odd position problem in Firefox and Safari

    Ran into something I thought was very odd and I wonder if anyone has any comments or can duplicate the problem on their end. I am using Dreamweaver on Mac to generate pages.

    In the following code I want the image to fit tight to the top left corner. By setting the padding of the enclosing div to 0, that is what I expect to happen. However in Firefox and Safari the image is offset down about 10 px. However if i use a graphic that is taller than 16 px in height then it fits tight into the corner. You can try this by using any graphic and resizing it so that it is less than say 10 px in height. Then resize again to over 16 px and it fits into the corner. The problem goes away when the doctype is set to xhtml transitional. Also goes away when you set up a rule for the image to position absolutely. But why should that be necessary?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #logo {
    width: 480px;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #666666;
    height: 100px;
    }
    -->
    </style>
    </head>

    <body>
    <div id="logo"><img id="skipnav" src="/Templates/images/logo.jpg" alt="" width="85" height="6" /></div>

    </body>
    </html>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    This is because images by default are displayed inline (CSS display: inline) or as text, to put it in English. The line-height is currently taller than the image so it's producing a space beneath and above it. You can solve this problem by using display: block on the image to kill the line height altogether or by using vertical-align: top, also on the image, to force the image to align with the top of the text line that it's in (it'll still have invisible space beneath it). If you're wondering exactly how much space the line is consuming, set a span element with a unique background color around the image.

    For further reference, this is also related to the Mysterious Gaps Problem, detailed in this thread: http://www.codingforums.com/showthread.php?t=89614.
    Last edited by Arbitrator; 08-29-2006 at 09:53 PM. Reason: clarification
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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