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!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

TD height problems IE vs others

Status
Not open for further replies.
rrsub

rrsub

MIS
Joined
Oct 23, 2002
Messages
536
Location
US
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.

 
Sort by date Sort by votes
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]
 
Upvote 0 Downvote
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]

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote

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]

 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote

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]

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

 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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.



 
Upvote 0 Downvote
rrsub said:
Billy Ray, that code still gives me a 3px difference in FF
Click to expand...

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:

thread215_1055460_lines.gif


Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]
 
Upvote 0 Downvote
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]

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
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:
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;
}
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
[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).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Camila James
  • Locked
  • Question Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
413
lucasbrown
lucasbrown
PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
2K
spamjim
spamjim
pendle666
  • Locked
  • Question Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
404
pendle666
pendle666
LyndonOHRC
  • Locked
  • Question Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
901
vacunita
vacunita
1DMF
  • Locked
  • Question Question
IFrame 100% height nightmare
Replies
10
Views
1K
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top