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 Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Cell offset by a pixel

Status
Not open for further replies.
dswitzer

dswitzer

Technical User
Aug 2, 2002
298
US
I have a very simple page that is driving me nuts:

Code: 
<html>
<head>
<title></title>
</head>
<body>
<TABLE WIDTH=450 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD WIDTH=150 BGCOLOR=Red>&nbsp;</TD>
		<TD WIDTH=150 BGCOLOR=Blue>&nbsp;</TD>
		<TD WIDTH=150 BGCOLOR=Green>&nbsp;</TD>		
	</TR>
</TABLE>

<TABLE WIDTH=450 BORDER=0 CELLPADDING=2 CELLSPACING=0 ID="Table1">
	<TR>
		<TD WIDTH=150 BGCOLOR=Blue>&nbsp;</TD>
		<TD WIDTH=150 BGCOLOR=Green>&nbsp;</TD>		
		<TD WIDTH=150 BGCOLOR=Red>&nbsp;</TD>
	</TR>
</TABLE>

<TABLE WIDTH=450 BORDER=0 CELLPADDING=2 CELLSPACING=0 ID="Table2">
	<TR>
		<TD WIDTH=300 BGCOLOR=Blue>&nbsp;</TD>
		<TD WIDTH=150 BGCOLOR=Red>&nbsp;</TD>		
	</TR>
</TABLE>
</body>
</html>

There are 3 tables:
First table -- 3 cells equal width, cellpadding=0
Second table -- 3 cells equal width, cellpadding=2
These cells line up fine (I tried different cellpadding to make sure even though I know it is an interior measurement)

The third table -- has only 2 cells, and the third cell resizes itself to become width=151 -- so the cells do not line up.

Is this possibly a function of my flatscreen monitor? I don't think so -- I pulled it up on another machine with an old CRT and still see it offset...

Please note -- this is a very simplified version of the issue which is putting in a layer on a table and having the columns align -- so putting all cells in a single table will not solve the issue for me.

Maybe this is well-known and I am just stumbling on it -- but this is pretty disturbing to me. Can someone try this on their machine and tell me if I'm seeing things? Has anyone seen this before and dealt with it in a resonable way?

Thanks.

Dave















 
Sort by date Sort by votes
If you change the "width=300" in the last tabble to "width=305", it looks great for me in both FF and IE.

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
Or you can set the cellpadding on the 3rd table to 0.

Code: 
<html>
<head>
<title></title>
</head>
<body>
<TABLE WIDTH=450 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD WIDTH=150 BGCOLOR=Red>&nbsp;</TD>
        <TD WIDTH=150 BGCOLOR=Blue>&nbsp;</TD>
        <TD WIDTH=150 BGCOLOR=Green>&nbsp;</TD>        
    </TR>
</TABLE>

<TABLE WIDTH=450 BORDER=0 CELLPADDING=2 CELLSPACING=0 ID="Table1">
    <TR>
        <TD WIDTH=150 BGCOLOR=Blue>&nbsp;</TD>
        <TD WIDTH=150 BGCOLOR=Green>&nbsp;</TD>        
        <TD WIDTH=150 BGCOLOR=Red>&nbsp;</TD>
    </TR>
</TABLE>

<TABLE WIDTH=450 BORDER=0 CELLPADDING=0 CELLSPACING=0 ID="Table2">
    <TR>
        <TD WIDTH=300 BGCOLOR=Blue>&nbsp;</TD>
        <TD WIDTH=150 BGCOLOR=Red>&nbsp;</TD>        
    </TR>
</TABLE>
</body>
</html>

 
Upvote 0 Downvote
Both of these are good workarounds and they both work for me -- setting width to 305 as well as removing cellpadding.

I guess what I am struggling with is that I shoudn't have to workaround this. This is very basic HTML. Either I am missing a very fundamental concept or something is very wrong. Can someone explain to me why:

Table1 and table 2 match even though table2 has cellpadding? And then why table3 will not align when it too has cellpadding?

The only difference is that table3 has 2 cells. If you make it 3 cells this is a non-issue.

What am I not understanding here?

Dave




 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
767
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
229
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
815
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
767
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top