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.

cLFlaVA · May 5, 2005

try this:

Code:

td.className {
    height: 27px;
    border-bottom: 1px solid black;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 26px;
}

html>body td.className {
    height: 26px;
}

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

BillyRayPreachersSon · May 5, 2005

Try using line-height as well. The following looks identical for me in IE 6 and FF:

Code:

<html>
<head>
	<style type="text/css">
		td {
			border: 1px solid #000000;
			height: 27px;
			line-height: 27px;
		}
		table {
			border: 1px solid #000000;
			border-collapse: collapse;
		}
	</style>
</head>

<body>
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td>abc</td>
			<td>def</td>
			<td>ghi</td>
		</tr>
	</table>
</body>
</html>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Vragabond · May 5, 2005

Do you have a complete and valid doctype as the first thing in your html document. Not having one will leave IE in quirks mode where it incorrectly interprets the box model.

BillyRayPreachersSon · May 5, 2005

I found it made no difference with out without a valid DOCTYPE, Vragabond...

That was my initial impression, too, so I had to try it. I was quite surprised, I must admit.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

rrsub · May 5, 2005

There must be something else in my code causing this.
Right now it's in a generic stage so this problem is welcome now but I still can't see what is wrong.

I redid only the table structure to see if it is indeed an IE vs other issue on table spacing.

This code works and there isn't much different between this and my project code.

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>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	<title>Table Test</title>

	
	<style type="text/css" title="default" media="screen">
	
	table, td{
	padding: 0px;
	border: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}
.header {
	height: 107px;
	border-bottom: 1px solid #392400;
}
	.td_leftnav {
	width: 190px;
	border-right: 1px solid #392400;
	vertical-align: top;
	text-align: left;
}
.td_leftnav table {
	width: 100%;
}
.td_leftnav td {
	border-bottom: 1px solid #392400;
	height: 27px;
	background: #E0DC9F;
	font: 10px Arial, sans-serif;
}
.sub_header {
	border-bottom: 1px solid #392400;
	width: 100%;
}
.sub_menus {
	height: 27px;
	border-top: 1px solid #392400;
}
.sub_space {
	width: 100px;
}
	</style>

</head>
<body>

<table align="center" width="400">
	<tr>
		<td colspan="2" class="header">Header
		</td>
	</tr>
	<tr>
		<td class="td_leftnav">
			<table>
			<tr>
				<td>Line1</td>
			</tr>
			<tr>
				<td>Line2</td>
			</tr>
			<tr>
				<td>Line3</td>
			</tr>
			<tr>
				<td>Line4</td>
			</tr>
			<tr>
				<td>Line5</td>
			</tr>
			<tr>
				<td>Line6</td>
			</tr>
			<tr>
				<td>Line7</td>
			</tr>
			</table>
		</td>
		
		<td>
			<table class="sub_header">
			<tr>
				<td class="sub_space"></td>
				<td class="sub_menus">other</td>
			</tr>
			<tr>
				<td class="sub_space"></td>
				<td class="sub_menus">line 2</td>
			</tr>
			<tr>
				<td class="sub_space"></td>
				<td class="sub_menus">line3</td>
			</tr>
			</table>
		</td>
		</tr>
		</table>
</body>
</html>

Vragabond · May 5, 2005

Here's a likely catch. FF and others support border-spacing property, while IE does not. IE simply ignores that. That might cause extra pixels in IE. And would also explain why Dan did not experience this, because he defined cellspacing in html.

rrsub · May 5, 2005

OK. I found the problem and it's still a problem.

If I apply any style or class to the TD for the nested table for the sub nav, I get my pixels off per browser.

If you take:

Code:

        <td>
            <table class="sub_header">

and change it to

Code:

        <td valign="top>
            <table class="sub_header">

The results will be different in IE vs others.

BillyRayPreachersSon · May 6, 2005

If your code is still problematic, then why not build your page up based upon the code I gave - which looks pixel-perfect in both browsers?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

rrsub · May 6, 2005

Billy Ray, that code still gives me a 3px difference in FF

Vragabond · May 6, 2005

Since you're struggling with tables and you're still in early stages of creating the website ... I see no indication of tabular data in your examples. If this is not for tabular data, have you considered making the layout via divs in css positioning?

rrsub · May 6, 2005

I'm trying to get the hang of that thought process as it looks much easier to maintain and easy to build once you have the thought process down but I don't quite have it down yet so I'm going with tables for now since I'm familar with them.

I look at csszengarden for inspiration almost daily.

BillyRayPreachersSon · May 6, 2005

rrsub said:
Billy Ray, that code still gives me a 3px difference in FF

Really? What version of FF are you using? Do you have your font set to anything other than "normal" size?

Using the exact code above, I see identical results in IE6, FF1, NN7, and Opera 7, as you can see:

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

BillyRayPreachersSon · May 6, 2005

P.S. To set your font-size to normal, either press Ctrl+0, or go to the "View" menu, then the "Text Size" submenu, and then click "Normal".

If it anything other than "Normal", I would expect FF to show different to IE, as it is far more likely to scale the font than IE (IE doesn't scale absolute font sizes).

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Vragabond · May 6, 2005

Since tables seem to be more trouble than they are worth, maybe you should try with the new approach and see where it takes you. If you stumble upon a problem, you can always ask. Oh, and here's a good advice for the future. Try to abandon the cross-browser pixel perfect look as soon as possible. There's too many OSes, browsers and settings that make doing that too much of a pain.

rrsub · May 6, 2005

Billy Ray,

I was going to show you screen caps of IE, FF, and Safari to show you how the nested table doesn't align with the left nested table but Vragabond seems to have kicked my butt into doing something I need to do anyway.

Anyway, I'm doing this nested DIV tags styles approach and I need some pre-appreciated assistance on some tricks.

If I have:

Code:

#header {
	width: 800px;
	height: 107px;
	background: #D5DBA6;
}
#col1 {
	border: 1px solid #222200;
	width: 800px;
}

My header tag is 2px smaller than my col1 tag. How can I fix that? I plan on using an image as the background for the header tag but I imagine that a color would do for now.

Also, I'm having problems with centering.

If I have

Code:

#container {
       text-align: center;
}

It works on IE but not others.

If I use <div align="center"> it works.

Vragabond · May 6, 2005

1. Box model takes into account margins, padding, borders and width. Your header is 800px (the width), while #col1 is 802px (width + left + right border). Divs are by default block level elements that expand the width of their parents. If you omit the width in col1 it will be 798px wide, i.e. just as much as you need it to be. Also, if you will be adding margins or padding later, the width will simply adjust. More on box model is here:

http://www.w3.org/TR/CSS21/box.html

2. Look at the CSS command there. It says text-align, not element align. It will align all text and other inline elements. I know this is a little hard to understand at first for the hardened old school html coders but the css way of centering objects is putting equal margins on left and right side of the element. This is done by putting the auto value to them. Easiest way is to define margins for top-bottom and left-right in a shorthanded [tt]margin[/tt] property. Remember, this doesn't go on a container but rather on the element you want centered. E.g.

Code:

#header {
  width: 800px;
  margin: 0 auto;
}

tsdragon · May 7, 2005

Here's a pretty good reference for the "box model" from MSDN: Measuring Element Dimension and Location.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

rrsub · May 7, 2005

OK, I'm starting to get the hang of this and really see how this becomes alot easier in the long run.

I can't seem to get my text to vertical align (namely on my left nav)as I want it to.
I tried a padding hack but that really screws it up on different browsers.

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>Div Tag test</title>
	<style type="text/css" title="Default" media="screen">
body{
	margin: 0px;
	text-align: center;
}
#container {
	text-align: center;
	margin: 0px auto;
	padding: 0px;
	width: 800px;
}
#header {
	height: 107px;
	background: #33DBA6; 
}
						#header2 {height: 50px;	background: #33DBA6;border: 1px solid #222200; 	}
#col1 {
	width: 190px;
	float: left;
}
#col2 {
	width: 610px;
	float: right;
}
#left_nav {
	border-right: 1px solid #392400;
	background: #E0DC9F;
vertical-align: middle;
}
#left_nav ul{
	margin: 0px auto;
	list-style: none;
	padding: 0px;
	font: 10px Arial;
vertical-align: middle;
}
#left_nav li{
vertical-align: middle;
	border-bottom: 1px solid #392400;
	height: 27px; 
}
#content {
	background: #FFFFDD;
	border: 1px solid #FF0000;
	height: 54px;
	vertical-align: bottom;
}

	</style>
</head>

<body>
<div id="container">

	<div id="header">
		Header 800 Pixels
	</div>
	
	<div id="header2">
		Header 800 Pixels Border
	</div>
	<div id="col1">
		<div id="left_nav">
			<ul>
				<li>190 pixels
				<li>27 height
				<li>Item
				<li>Another Item
			</ul>
		</div>
	</div>
	
	<div id="col2">
		<div id="content">
				610 pixels<br>content
		</div>
	</div>

</div>

</body>
</html>

What am I doing wrong on this?

Vragabond · May 7, 2005

[tt]vertical-align[/tt] is really not supported in the best way in most browsers. I suggest you use padding and margins to control position of text within boxes. if you put equal top and bottom padding to a block object you should end up with somewhat centered result -- depending on the height of the element (omitting the height might be a good option).

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

MIS

Programmer

Programmer

Programmer

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

Programmer

Programmer

MIS

Programmer

Programmer

MIS

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor