Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: incrediBILL

table cell wider than specified in IE

Looks ok in IE, Firefox, Safari Mac but on PC all distorted

   
5:50 pm on Dec 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi.

I have a table set at 650 width, align center, with one table cell set at 150 width and the other at 500 width and this repeats down the page for 4 rows. the smaller cell has a smaller table in it (nested table) with an image of a button as the background with a url over the image (controlled by css) this table is smaller than the td surrounding it at 136 width. I have URl's in the small table but they are broken and only 3 px cellpadding in the cell. The larger cell on the right has mainly text.

This looks fine on the Mac with IE 5.2, Safari and Firefox at 800 resolution and on the PC at 1040 resolution but on the PC at 800 resolution with IE 6 the smaller cell is 250 wide and the larger is 400 wide (the table in smaller cell is aligned near left side of td cell like it should be.

However something is pushing the width of smaller cell over by 100 pixels when viewed with IE6 on a PC.

Any ideas?

here is the code with most of the data removed:

<table align="center" width="650" border="1" cellpadding="5" cellspacing="0">
<tr><td colspan="2">
<h1>###</h1>
####Intro paragraph####
</td></tr><tr><td width="150">

<table width="136" align="center" border="0" cellpadding="3">
<tr><td align="center" valign="middle" class="whitebox">
<br><br>
<div class="menulinks">
<a href="####.htm">
######</a>
</div>
<br><br>
</td></tr></table>

</td><td width="500">

<div class="indent">
<h2>--------</h2>
---TEXT-----</b></a></span>
</div>

----THE ABOVE IS REPEATED 4 TIMES-----

</td></tr></table>

CSS DATA:

.indent {
margin: 0px 5px 0px 5px;
}

.whitebox{ background-color:#F7F2E6;
background-image:url(images/NoticeBoxbackgrd5b.gif);
background-repeat:no-repeat;
}

.menulinks a:visited {color: #000080;
background: transparent;
text-decoration: underline;
font-weight:bold;
font-size:10px; }

etc.

7:51 pm on Dec 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's hard to say from that example, but usually when I have this problem it eventually turns out to be with the content. Some of it is big enough to stretch the cell it's in. I'd look for long words, especially in H1 , H2, or bold styles that exceed the alotted width. If you're not letting text wrap onto a new line, a phrase can do this too.
9:12 pm on Dec 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member





It's hard to say from that example, but usually when I have this problem it eventually turns out to be with the content. Some of it is big enough to stretch the cell it's in. I'd look for long words, especially in H1 , H2, or bold styles that exceed the alotted width. If you're not letting text wrap onto a new line, a phrase can do this too.

I reduced the link in small table cell to only 2 words each so it's not wrapping and no chance it's forcing the cell to widen and there are no header tags in there or bold, etc. but the width of that smaller cell is still tooo olong by 100 pixels in IE 6 on the PC.

but thanks for trying to help.

9:20 pm on Dec 14, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Have you validated the html and css? Always a good idea, especially when you have a hard to understand debug going on.
11:06 pm on Dec 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, I validated both first.

I found the problem. It was a paragraph in cell above with a Header tag, spaning 2 colums surrounded by a <p> tag. It must have been the H and P tags messing it up.

I made 2 separate tables and then the lower cells aligned as specified.

I also changed the data in smaller cell to nested divs so it would upload the image and superimpose the text above it. I changed most of the code I posted above so don't anyone use it :o)

thanks to those who tried to help.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month