TD height problems IE vs others

rrsub · May 5, 2005

Using CSS to set the height of my TD cells, I specify 27px and have a border-bottom of 1px.

IE measures this at 27px while other browsers measure at 26px after the render.

The problem I have is nested tables with no padding or spacing. I'm trying to match a nested table to match the borders and in IE, I'm 3px off.

There must be a tweak I don't know about to fix this.

rrsub · May 8, 2005

I went with a padding top and bottom of 1em and while that produces a pleasant result, it's not consistent on all browsers. The spacing is but not the spacing alignment.

The problem with that is I have an image at 136px height that needs to line up with my 5th line item and there is a rule under that that will definitely stick out if it's not lined up.

Height gurantees me my spacing but I can't use vertical-align.
If I use padding-top and subtract that from height, I get a good compromise except for IE which for some reason does a bottom alignment.

rrsub · May 8, 2005

This mess provides the desired end result on the browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Table test</title>
	<style type="text/css" title="Default" media="all">
.rule{
	height: 1px;
	background: #392400;
}
.lnav {
	height: 26px;
	background: #E0DC9F;
	text-align: right;
	padding-right: 10px;	
}
.rnav {
	text-align: left;
	padding-left: 10px	
}
	</style>
</head>

<body style="margin: 0px;">
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
	<td height="107" bgcolor="#33DBA6" colspan="4">Header</td>
</tr>
<tr>
	<td width="189" class="rule"></td>
	<td width="1" class="rule"></td>
	<td width="470" class="rule"></td>
	<td width="140" class="rule"></td>
</tr>
<tr>
	<td class="lnav">190 Pixels</td>
	<td class="rule"></td>
	<td rowspan="9" bgcolor="#FFFFDD">image</td>
</tr>
<tr>
	<td class="rule"></td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="lnav">27 Height</td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="rule"></td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="lnav">Item 3</td>
	<td class="rule"></td>
	<td class="rnav">140 Width</td>
</tr>
<tr>
	<td class="rule"></td>
	<td class="rule"></td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="lnav">Item 4</td>
	<td class="rule"></td>
	<td class="rnav">Item 4</td>
</tr>
<tr>
	<td class="rule"></td>
	<td class="rule"></td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="lnav">Item 5</td>
	<td class="rule"></td>
	<td class="rnav">Item 5</td>
</tr>
<tr>
	<td class="rule" colspan="4"></td>
</tr>
<tr>
	<td class="lnav">Item 6</td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="rule""></td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="lnav">Item 7</td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="rule"></td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="lnav">Item 8</td>
	<td class="rule"></td>
</tr>
<tr>
	<td class="rule"></td>
	<td class="rule"></td>
</tr>
</table>


</body>
</html>

My original thought was to use nested tables to kind of keep everything together, the left nav, the sub nav, content.
However that produced undesired results on different browsers especially when using borders.

I really like the nested div-tag with CSS approach however I can't get my text aligned and any work-around produces different results on different browsers. (mainly IE vs everybody else)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

TD height problems IE vs others

rrsub

MIS

rrsub

MIS

rrsub

MIS

Similar threads

Part and Inventory Search

Sponsor