link bleeding outside image area

[GazK]

I'm not sure whether this would be best posted here or in the CSS forum, as I suspect its caused by both. I have an image link on my new site, but the <a> box seems to be larger than the image it contains. The code is as follows:

<a class="imglink" name="top" href="index.php">
<img id="mainlogo" src="siteimages/mainlogo.jpg" width="300" height="100" alt="The Railways Archive"></img>
</a>

CSS relating to this is as follows:

a.imglink {
	background: none;
	margin: 0;
	padding: 0;
}

#mainlogo {
	margin: 0;
	padding: 0;
}

you can see the result here:

http://www.railwaysarchive.co.uk/new

The maroon logo image (strictly a temporary image!) at top left is 100px deep. But an extra 4 pixels is being added to the link size in both FF and IE, forcing the banner to be bigger and wrecking the look.

Can anyone help and tell me what I'm doing wrong?

[nodehead]

I'm not seeing the problem being reproduced in any browser, so it's hard to say for certain - but it's likely a line-height problem within the anchor with the imglink class: You can set a line-height within a.imglink of 0 (may affect link-clicking ability, depending on the rest of your css), 1em (may make matters worse, depending on the rest of your css) or an exact pixel size (may affect other links since it's a class) and see if any of those sort it.

[Fang]

#mainlogo {vertical-align:top}

https://developer.mozilla.org/en/Ima...ysterious_Gaps

[GazK]

I'm pretty sure it's there in every browser - I just checked Chrome and its there too. It's highlighted in this screen grab:

http://www.railwaysarchive.co.uk/temp/screen.jpg

[Fang]

Use the fix given in #3

[GazK]

#mainlogo {vertical-align:top}

https://developer.mozilla.org/en/Ima...ysterious_Gaps

thats cracked it, thanks Fang! your link reminded me that I have come across this problem in the distant past - too distant to remember the solution. Thansk again!