Table Row Too high

This site is best viewed in a modern browser with JavaScript enabled.

RogerInHawaii

I've got a table whose first row consists of three columns <TD>s, as follows:

<table border="1" cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
	<tr style = "height:3px;">
		<td style="width:3px; height:3px;">
		<img src="../Borders/TestUL.gif" vspace="0" hspace="0" border="0" width="3px" height="3px"/>
		</td>

	<td style="width:100%; height:3px;">
	<img src="../Borders/TestT.gif" vspace="0" hspace="0" border="0" width="100%" height="3px"/>
	</td>

	<td style="width:3px; height:3px;">
	<img src="../Borders/TestUR.gif" vspace="0" hspace="0" border="0" width="3px" height="3px"/>
	</td>
</tr>

The row and each of the columns are defined as being 3 pixels high. It displays just fine in Chrome and Netscape. But in Internet Explorer the row ends up being about 18 pixels high. It's almost like what you see when there's a non-breaking space in the row, but there isn't any.

Any suggestions as to what I need to do to make it really, truly be just 3 pixels high, even for Internet Explorer?

cbVision

Seems to display fine for me in IE8. What's your doctype?

RogerInHawaii

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

cbVision

Ah, I see why it's working for me ... I use a CSS reset :)

table,tbody, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100&#37;;
	font-family: inherit;
	vertical-align: baseline;
}

RogerInHawaii

So, are you saying that when you do NOT do that CSS reset you're seeing the same odd symptoms tat I'm seeing, i.e. the row is taller than it should be?

I've never used CSS. Can you tell me what I need to do to tell my page to do that reset?

cbVision

Woah, never used CSS?!

Have mercy!

You'll want to add this to your HTML:

<style type="text/css">
table,tbody, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100&#37;;
	font-family: inherit;
	vertical-align: baseline;
}
</style>

Devastated73

Just about the best css reset script from the css guru himself can be found at:

http://meyerweb.com/eric/tools/css/reset/

P.S. I find it's always best to reset css to achieve maximum browser compatability when designing websites.

Devastated73

P.P.S. With regards to:

if you place this image as a background on it's container it will auto grow to fill it... furthermore you do not need to place 'px' in image dimension fields.

so roughly:

instead of

	<td style="width:100%; height:3px;">
	<img src="../Borders/TestT.gif" vspace="0" hspace="0" border="0" width="100%" height="3px"/>
	</td>

try

http://www.cardiff-website-design.com