Table Row Too high

**RogerInHawaii** · 03-04-2011 03:18 PM

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

Code:

<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** · 03-04-2011 03:47 PM

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

**RogerInHawaii** · 03-04-2011 03:49 PM

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

**cbVision** · 03-04-2011 04:02 PM

Code:

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** · 03-04-2011 04:09 PM

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** · 03-04-2011 04:32 PM

Woah, never used CSS?!

Have mercy!

You'll want to add this to your HTML:

Code:

<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** · 03-04-2011 06:35 PM

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** · 03-04-2011 06:45 PM

P.P.S. With regards to:

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

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

<td style="width:100%; height:3px; background-image:url(../Borders/TestT.gif);"> </td>

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

Thread: Table Row Too high

Thread Tools

Display

Table Row Too high

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions