CSS - Extra pixels below image when nested in div, a, p (Firefox) 1

[Stoemp]

Hi

I'm designing a HTML page with CSS to send as a newsletter to our customers. I validated the page and it's XHTML 1.0 strict, but I have one lay-out problem. The top header of the page is one big graphic and is nested in an <a>-tag. In Firefox I see 2 or 3 pixels extra below the image, creating an unwanted whitespace. The code I use for the image header is:

<tr>
<td style="width: 600px; height: 89px; border: none;">
    <a href="[URL unfurl="true"]http://www.biognost.be/research/"[/URL] rel="external" style="border: none;"><img src="[URL unfurl="true"]http://www.biognost.be/maps/researchHeaderNieuwsbrief.jpg"[/URL] alt="Biognost Research" style="width: 600px; height: 89px; border: none;" /></a>
</td>
</tr>

Can I do anything about it? (I know I shouldn't use tables, but at this point I don't have the time to change that...).

A preview of the newsletter can be seen at:

http://www.biognost.be/research/newsletters/20041201.html

Thanks

Steven

 

[FesterSXS]

try setting the margin of the IMG to 0px

Tony
________________________________________________________________________________

http://www.SpiraxSarco.com

 

[Stoemp]

Tony

Thanks for the reply, but this doesn't work. I just tried it.

Any other tips?

Thanks

Steven

 

[ChrisHunt]

Also, try removing all spaces & carriage returns between the <td> and the <a> (and the </a> and the </td>).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Stoemp]

Chris

There are no spaces and returns between the elements. The lay-out you see here is only to clarify. In the page itself, the code for the tr is on 1 line.

Thanks

Steven

 

[philote]

On the style for the a tag, add display: block. The a was actually dropping below the image a bit, creating the space, but changing it to display as a block element makes it wrap nicely around the image.

 

[Stoemp]

philote

Thanks for the tip, but it didn't work here. Did you try it on my code (you can find it on the location I provided in my original message)?

Steven

 

[philote]

That's strange, I had changed it in Firefox's DOM Inspector and it worked there. I just grabbed your source code and also added in a height of 100% to the a tag and that appears to have worked.

 

[dkdude]

Hi,

First, the image is actually 598 wide, not 600.

This works for me in IE6 and firefox:

<style>    #logo {
      width 		: 598px;
      height		: 89px;
	background-image	: url([URL unfurl="true"]http://www.biognost.be/maps/researchHeaderNieuwsbrief.jpg)[/URL]
    }
</style>

... and ...

  <tr>
    <td style="width: 598px; height: 89px; border: none;">
      <a href="[URL unfurl="true"]http://www.biognost.be/research/"[/URL] rel="external" style="border: none;">
        <div id="logo"></div>
      </a>
    </td>
  </tr>

Regards


Jakob

 

[Stoemp]

Jakob

Your solution works indeed. Thanks a lot for that! But I find it strange that my solution doesn't work. It remains a mystery.

philote

The height: 100% isn't working here. Strange...

Thank you guys for the great help!

Steven

 

[ChrisHunt]

I've just happened across an article explaining the reason for the original problem -

http://www.hut.fi/~hsivonen/standards.html#lineboxmodel

.

Basically, when you have code like this:

<a href="#"><img src="xxx.gif" /></a>
[code]
standards-compliant browsers will align the image at the baseline of the link, that is the line along which any text would be displayed. This will be a few pixels above the bottom to allow space for descenders on p, q, j, etc. Making the <a> and <img> display:block should fix it.

-- Chris Hunt
[url=http://www.mcgonagall-online.org.uk][i]Webmaster & Tragedian[/i][/url]
[url=http://www.extraconnections.co.uk]Extra Connections Ltd[/url]