CSS: remove gap under image

[chlori]

Hi

There is a gap under the logo image (IE6/FF1):
http://www.arto.ch/tests/thinklab/index2.php

How can I remove it?

(The image is just an ugly dummy image...)

 

[Roy Schestowitz]

Hi

There is a gap under the logo image (IE6/FF1):
http://www.arto.ch/tests/thinklab/index2.php

How can I remove it?

(The image is just an ugly dummy image...)

Try adding a margin or padding attribute to the <p id="logo"> element, e.g.
style="margin-bottom: 0px; padding-bottom: 0px". I am not sure about the
names here, but it's the idea I hope to get across.

Roy

 

[Steve Pugh]

There is a gap under the logo image (IE6/FF1):
http://www.arto.ch/tests/thinklab/index2.php

How can I remove it?

The <h1> has position relative. Remove that and add borders to the
<h1>. What do you see? The bottom border of the <h1> coincides with
the top of the nav strip.

When you use position: relative the rest of the page is laid out as if
that element had been in its static position.

You've given the h1 a line-height of 60px so it has to be 10px taller
than the 50px tall image. Hence there will be at least a 10px gap.

Setting a pixel line-height is a bad idea - it causes problems when
the font size is larger than that pixel value.

Remove the line-height and the gap becomes much smaller.

The remaining gap is due to the fact that images are treated as text
and sit on the baseline of their line box. In this case this means
that <p id="logo"> (BTW is that really a paragraph?) has space below
the baseline just as it would if there was text in there. Set display:
block for the logo <img> to remove.

Steve

 

[chlori]

Steve Pugh schrieb am 20.01.2005 12:19:

Remove the line-height and the gap becomes much smaller.
Worked...

<p id="logo"> (BTW is that really a paragraph?)

No, but the validator didn't like the image standing
there alone when I changed from transitional to strict.

has space below the baseline just as it would if there
was text in there. Set display: block for the logo <img>
to remove.

Thanks Steve!

 

[Richard]

Hi

There is a gap under the logo image (IE6/FF1):
http://www.arto.ch/tests/thinklab/index2.php

How can I remove it?

(The image is just an ugly dummy image...)

<h> tags inherently include a break like a paragraph does.
Instead of a <h> use "text-size:14pt".
I prefer pt to px because a font is set up naturally in pt.
Then for your images use img {margin;0px;}
No dot or # before img.
Personally, I like a little seperation between images and text.

 

[Michael Fesser]

.oO(Richard)

<h> tags inherently include a break like a paragraph does.

Like every other block-level element.

Instead of a <h> use "text-size:14pt".

Bigger text doesn't make a heading.

I prefer pt to px because a font is set up naturally in pt.

The results across different browsers/platforms are unpredictable when
using pt in screen stylesheets. What is 1pt on a screen?

Then for your images use img {margin;0px;}

Images don't have margins by default, but since they are inline-level
elements they are positioned on the baseline. Adjusting vertical-align
helps in some cases.

Micha

 

[ghoul]

<h> tags inherently include a break like a paragraph does.
Instead of a <h> use "text-size:14pt".
I prefer pt to px because a font is set up naturally in pt.
Then for your images use img {margin;0px;}
No dot or # before img.
Personally, I like a little seperation between images and text.

sicko

 

[Blinky the Shark]

(The image is just an ugly dummy image...)

Just what the world needs -- more images of ugly dummies...

 

[Neal]

sicko

plonko

 

[Toby Inkster]

What is 1pt on a screen?

It's 1/72 of an inch on a screen.

 

[Toby Inkster]

Bigger text doesn't make a heading.

Don't worry -- "text-size" won't make it bigger text either. ;-)

 

[Bernhard Sturm]

Don't worry -- "text-size" won't make it bigger text either. ;-)

LOL
I think it doesn't matter as long as Richard thinks it will do this