CSS padding for IE4 on the MAC

Tyger · Oct 11, 2001

When I set padding in pixels in a cell in a table I get twice as much padding as I want. If I type STYLE="padding-left:50px" I get 100px of padding in IE4 on the mac, but the correct 50px in IE5 in Windows. I know there are bugs in these programs but that is a fairly major problem with layouts.

The following code demonstrates what I mean. In it a table is nested inside the cell of another. The outer cell is coloured yellow and has padding of 50px forcing the inner table accross 50pixels in windows and 100pixels on the Mac.

There is another table bellow which I have set to 100px wide. It is clearly the same width as the yellow padding, which is supposed to be only 50px on the Mac.

<HTML>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR><TD STYLE="padding-left: 50px; background: #ffcc66">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=300px>
<TR>
<TD STYLE="background: #ffffff">
<P>Table 1 (The Inner Table)</P>
<P>Padded out by 50px</P>
</TABLE></P>
</TABLE>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=100px>
<TR><td>
<P>Table 2</P>
</TABLE>
</HTML>

Glowball · Oct 11, 2001

I've been having some issues with popup windows coming up with more space than I asked in IE on the Mac too. I've been looking around for confirmation of the problem but haven't had much luck.

See

http://www.glowball.com/testing/

for the example, it pops up a nice window in everything but a couple of Macs. It's a mystery to me (as is your issue).

Tyger · Oct 12, 2001

I managed to solve my current problem by sticking STYLE="padding:0; margin:0" into the <TABLE> tags. It seems that simply setting CELLPADDING and CELLSPACING to 0 is not enough to eliminate all unwanted default padding.

My latest problem is that if I nest tables in a similar way to the previous situation, but specify a width for both, I get my padding on both sides, not just the left as specified.

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=100%>
<TR><TD STYLE="padding-left:50px">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=100%>
<TR><TD>
<P>Hello</P>
</TABLE>
</TABLE>

Instead of getting one table inside another, with a 50px gap between the left inside edge of the outer table and the left edge of the inner table, I get 50px on either side. The result is that the inner table appears centred!

The alternative method of not nesting tables, and simply setting a left margin of 50px for a single table has exactly the same unwanted effect.

http://css.nu/pointers/bugs.html

and

http://css.nu/pointers/oldbugs.html

Have quite a good list of css bugs and possible solutions for various browsers and operating systems, but i can find no mention of this particular case.

Glowball · Oct 12, 2001

I think that some browsers won't like your code, though -- yes you don't have to close tags but it is good practice to do it anyway. Also, it could be something akin to how some browsers handle images within a cell. For example, these two are different:

<td><img src="...">

<td>
<img src="...">

Some browsers treat that new line as white space and pad the image accordingly. So here is what I would suggest, will this work?

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=100%>
<TR>
<TD STYLE="padding-left:50px"><TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=100%>
<TR>
<TD><P>Hello</P></TD>
</TR>
</TABLE></TD>
</TR>
</TABLE>

That's will all closing tags and no space between opening or closing <td> tags and the content within that <td> -- see if that helps?

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!

CSS padding for IE4 on the MAC

Tyger

Programmer

Glowball

Programmer

Tyger

Programmer

Glowball

Programmer

Similar threads

Part and Inventory Search

Sponsor