On Oct 23, 2009, at 10:44 AM, Birdie wrote:
> I have two divs.
>
> They should have no space between them. At the moment there is a
> thin blue
> line of about 2px between the flag logo and the plane picture.
>
>
>
> I have set every margin and padding that I can think of to 0px. But
> it still
> will not go away.
>
>
>
> The xhtml page is here: http://www.koolfish.com/test/index.html
>
> And the css is here: http://www.koolfish.com/test/css/mainstyles.css
Hi Lisa,
Images are inline elements, and as such they rest on the baseline
generated by their parent. That leaves some (tiny) space below the
image, space that is used in the parent element to display descenders
(p, q, j, etc).
In your case, the 'offender' is the logo image.
A few easy fixes:
#header img {display:block;}
or
#header img {vertical-align: bottom;}
This article explains all this in more detail
<https://developer.mozilla.org/index.php?title=en/Images%2C_Tables%2C_and_Mysterious_Gaps
>
Sidenote: you use the id="header" twice in your document, that is not
valid, and ID can only be used once. You could simplify your html by
reoving hte <div id="header"> completely, as it is unnecessary.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
