Solution for 1px height black line

html plus a bit of CSS

[SilverLining]

Hey All

I have a leftmenu navigation (width: 143px) with boxes inside it. Each box has a black line above and below it. This line needs to be only 1px height. Basically it works in IE, but in Firefox the cell is displayed at aprox 1.2em line height.

I have tried setting 1px height on td and tr with black background, then in the cell the spacer is set to 1px height.

<tr><td class="oh_crap"><img src="/images/generic/spacer.gif" width="143" height="1" alt=""></td></tr>

Prob has to do with Style inheritance overriding... (well, it def does) when i view file alone on local machine it looks perfect. I have tried overriding styles and everything else, but no luck. Any ideas would be awesome - thanks!

PS i also tried
. oh_crap {height: 1px; line-height: 1px; font-size: 1px;} etc.

[Angelis]

If you are using CSS try using border:thin; instead of a px value...

[benihana]

could you emit this row altogether, and apply

border-bottom:1px solid #000;

to the row above?

[SilverLining]

thanks Angelis. I've just tried .borderthin {border: thin solid #000;} but that doesn't work...

[SilverLining]

Hi benihana. i tried that too, but in FF the line was 2px (no idea why), but then the top row wont have an "automatic" top border.

[Setek]

A spacer image with an otherwise empty row is unnecessary... You can:

table { border-top: 1px Solid #000; }
table td { border-bottom: 1px Solid #000; }

<table cellspacing="0">
<tr>
<td>test</td>
</tr>
<tr>
<td>row 2</td>
</tr>
</table>

If you are having problems with specifity, you'll have to show all the css that would affect the table and then go from there :)

[SilverLining]

all sorted, but now only inheriting one stylesheet... what a mission. thanks for all the advice guys! SL