Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
08-29-2006, 09:15 PM #1
- Join Date
- Aug 2006
- 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">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<div id="logo"><img id="skipnav" src="/Templates/images/logo.jpg" alt="" width="85" height="6" /></div>
08-29-2006, 09:48 PM #2
- Join Date
- Mar 2006
- Splendora, Texas, United States of America
- 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.