'perfect fit' image pushes out nav bar

[jxm28788]

This problem is best explained by example, so have included 'before' and 'after' code...

The nav bar in my template is made up of two heavy lines with the buttons in between -

		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td colspan="2" bgcolor="000000"><img src="shim.gif" height="2"></td>
			</tr>
			<tr>
				<td width="10" bgcolor="gray" ><img src="shim.gif" height="26" width="10"></td>
				<td valign="top" align="left" bgcolor="gray" ><img src="crazy-daves-contact-button-1.gif" alt="Contact" name="mycontact" height="18" width="110" border="0"></a>
				</td>
			</tr>
			<tr>
				<td colspan="2" bgcolor="000000"><img src="shim.gif" height="2"></td>
			</tr>
		</table>

Notice how the 'shim' makes the height of the nav bar 26 pixels. Now I want to put in some buttons that sit perfectly between the two bars - so I made then 26 pixels high.

However, when you set the height of the button to 26 (see code below) there are a few extra pixels of space inserted and you can see the shim is now smaller than the gap.

		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td colspan="2" bgcolor="000000"><img src="shim.gif" height="2"></td>
			</tr>
			<tr>
				<td width="10" bgcolor="gray" ><img src="shim.gif" height="26" width="10"></td>
				<td valign="top" align="left" bgcolor="gray" ><img src="crazy-daves-contact-button-1.gif" alt="Contact" name="mycontact" height="26" width="110" border="0"></a>
				</td>
			</tr>
			<tr>
				<td colspan="2" bgcolor="000000"><img src="shim.gif" height="2"></td>
			</tr>
		</table>

So what is causing this extra space???

[jont]

There is an errant </a> that has not been opened in that snippet - presumably this is needed before the <img /> - check the CSS on any pseudo classes on the anchor tag

You would be better creating this much more cleanly in CSS eg:

<div class="heavyLine"><!----></div>
<div class="myButton"><a href .......><img ..... /></a></div>
<div class="heavyLine"><!----></div>

and simply setting heavyLine class as a solid border at say 3px or similar

[jxm28788]

There is an errant </a> that has not been opened in that snippet

ah yes, I snipped a bit to much code out to make the example simpler - and took the <a href> code with it...

<div class="myButton"><a href .......><img ..... /></a></div>

I'm not really sure what would go in the .css file though?

But let's make this example even simpler - take the top and bottom bars out of the equation. The basic problem is that when I put a 26pixel high graphic in a 26pixel high cell something causes the cell to expand beyond 26 pixels.

To make everything line up I need the cell to be 26 pixels high, and I need the buttons to be 26 pixels high. Logically, looking at the code, there is no reason why this should not work...

[jxm28788]

Problem solved...

If you put the </TD> on the same line it gets rid of the space...

So ...

<td>
<img....>
</td>

...is not the same as...

<td><img....></td>

And any text or &nbsp; will also space it out if used in the same row...

[jont]

Ahhhh.... good old IE white space bug