Why is IE screwing up table width?

[xoggoth]

Have a fixed width table with fixed width columns, left column has image, right has text:

<table width=800px cellpadding=0 cellspacing=0>
<tr>
<td style="width:160px; border-left:1px solid black;">
<img src="image_files/mallow.gif">
</td>
<td style="width:640px; border-right:1px solid black; padding:10px;">
<p>Blah blah blah</p>
</td>
</tr>
</table>

The image is exactly 160px wide, so expect that at left, then 10px padding, then text. As these links to images show, this is fine with firefox but IE keeps making the column with the image in much wider.

Anyone got any ideas why or how to fix it? Ta for any suggestions.

[MrRobin]

There may be default margins set in your IE. Try coding all margins to 0

[PAH]

Try taking off the 'padding:10px' and add an extra TD in the middle of the two existing ones, with a width of 10px.

Never use padding in that way, but I thought it required 4 parameters so may be defaulting to something daft in IE.

[xoggoth]

Thanks for answers. Those didn't work I'm afraid, but sorted it by using background image instead.

<td style="width:160px; border-left:1px solid black; text-align:left; background-image:url(image_files/mallow.gif)">&nbsp;</td>

[PAH]

If you want a decent working solution we don't give the real answers away for free.

Though I suppose we've already failed the technical test.

[chicane]

There's no need for padding in this instance. Overcomplicating the markup increases the likelihood of it working in other browsers or older browser versions (e.g. Safari or IE5.5).

<table width="800" cellpadding="0" cellspacing="0">
<tr>
<td width="170">
<img src="image_files/mallow.gif">
</td>
<td width="630">
<p>Blah blah blah</p>
</td>
</tr>
</table>

Alternatively, you could accomplish all this with CSS, but that's a different story.

[PAH]

Alternatively, you could accomplish all this with CSS, but that's a different story.

Don't tell him that. CS spray can be dangerous in the wrong hands.

I really hate all the nuances between browsers. It's about time they stopped messing about and adhered to one standard. So what if a lot of older or poorly developed sites break. We'd have another Y2K 'disaster' on our hands. All that lovely money.

[chicane]

I really hate all the nuances between browsers. It's about time they stopped messing about and adhered to one standard.

All modern browsers are (supposedly) implementations of the same W3C HTML/CSS/JavaScript standards though.

Putting aside the mess that is IE versions prior to 6 (all of which are now virtually obselete anyway), the only reason for significant differences in page layout between browsers is misunderstanding of the W3C standards and/or a lack of experience.

[NickFitz]

All modern browsers are (supposedly) implementations of the same W3C HTML/CSS/JavaScript standards though.

Putting aside the mess that is IE versions prior to 6 (all of which are now virtually obselete anyway), the only reason for significant differences in page layout between browsers is misunderstanding of the W3C standards and/or a lack of experience.

IE 6 is also a total mess in terms of standards support, being extremely buggy and failing to implement assorted parts of the various standards, or implementing them in a way that is the complete opposite of the specification. IE 7 cleared up some of the mess and added some stuff they were lacking, but introduced a whole new set of bugs.

The primary reason for significant differences in page layout between different browsers is people developing for IE and then trying to fix it for proper browsers. As IE is so badly broken, the fact that a layout looks correct in IE is prima facie proof that you've done it wrong.

The only sensible strategy is to get it working in Firefox, Opera and Safari (which almost always render stuff the same way) and then add in whatever bug fixes are necessary to beat IE into submission.

Oh, and ensure your page has an appropriate <!DOCTYPE> at the very top to trigger the strict standards-compliant rendering mode, unless you're aiming for backwards compatibility with Netscape Navigator 3

[chicane]

IE 6 is also a total mess in terms of standards support, being extremely buggy and failing to implement assorted parts of the various standards, or implementing them in a way that is the complete opposite of the specification.

IE6 is a bit like a minefield - once you know where to tread (and just as importantly) where not to tread, you're just fine. Certain parts of the CSS implementation are indeed weak and/or broken as you say, but these limitations rarely get in the way of an experienced HTML monkey. The important thing from my perspective is that there's more than one way to skin a cat - if approach X doesn't work in IE6, you can use approach Y to accomplish the same effect, usually without compromising the layout or semantic integrity of the page.

We've just deployed a set of rather complex and demanding page layouts here, running in standards mode CSS only (no tables) and damn close to indistinguishable between Firefox and IE6. I can count the number of IE-specific fixes used on one hand.

Blame the tradesman, not the tools.