Why is IE screwing up table width?

[PAH]

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.

Tell me about it. Tried knocking up a simple website for my dad using FreeTextBox so he could update the content himself. All fine and dandy in IE7 and Firefox, but being a right pain in the ass with IE6.

Doesn't help that the FreeTextBox docs are next to useless. May have to resort to drastic action and purchase a licence for a similar non-free solution. All because he wants to have bold and other frills in his content.

I suppose I could set up a page on MySpace for him instead!

[NickFitz]

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.

Absolutely - as a general rule, I never need more than a few hasLayout triggers ("zoom: 1;") and maybe a "display: inline;" or two (to fix the margin-doubling on floated elements) scattered about here and there to achieve correct rendering in IE 6.

This is the point of testing in IE as the final step of the implementation - with experience, no matter how appallingly broken the IE rendering is, it's pretty obvious which elements need to have the hasLayout property triggered. Ultimately, many of the IE bugs come down to that single (non-standard) property. Unfortunately, IE's internal dependence on that property means that it is, in fact, fundamentally incapable of rendering some layouts that are within the capabilities of a rendering engine that conforms to the standards.

But when it comes to things like the IE7 bug whereby the universal selector can be used to make comments render on the page... well, all one can say is FFS, Microsoft

Things like that don't exactly inspire confidence in the software

[PAH]

Maybe that guy who wrote "Designing with web standards" had a point, which advocated using CSS and cutting out all the crap, even if it meant layout was not 100% but would always render to a similar level on any browser.

Whilst IE is still the browser of choice for the mass population I prefer to design to that and then if someone says their Firefox or geek-browser doesn't render properly, it's their own fault for shunning the mainstream. Typically they're more computer literate if they do that anyway, so more likely to be aware of the issues, and therefore more tolerant.

Much easier than trying to explain to someone totally non-computer literate why a page looks crap in IE.

A lazy approach I know, but it works for me. My recent contracts have only required IE compatibility anyway, with the other browsers a bonus.

[NickFitz]

Maybe that guy who wrote "Designing with web standards" had a point, which advocated using CSS and cutting out all the carp, even if it meant layout was not 100% but would always render to a similar level on any browser.

Whilst IE is still the browser of choice for the mass population I prefer to design to that and then if someone says their Firefox or geek-browser doesn't render properly, it's their own fault for shunning the mainstream. Typically they're more computer literate if they do that anyway, so more likely to be aware of the issues, and therefore more tolerant.

Much easier than trying to explain to someone totally non-computer literate why a page looks carp in IE.

A lazy approach I know, but it works for me. My recent contracts have only required IE compatibility anyway, with the other browsers a bonus.

I don't have any problem implementing sites using standards-compliant code to work across all browsers, and neither do the people I work with. This is because we regard ourselves as professionals with a duty to do the best possible job for our client - better, faster and cheaper are all immediate benefits of standards-based development. If nothing else, you need to work to the standards to ensure accessibility, which is a legal requirement on companies in just about every country in the developed world, and which simply cannot be achieved using table layouts and IE-specific code.

Many people make the mistake of thinking that accessibility is something that has to be added to a site, or that a separate "accessible" version of the site must be provided. This is untrue - by implementing your sites in accordance with the standards you get accessibility for free. It's also a money-saver, not just in terms of the initial build, but also when considering long-term maintenance and future enhancements.

And yes, you do have to invest the time to understand the standards rather than just clicking the "Use CSS" checkbox in Dreamweaver - but then, why would you want to be doing a job you don't understand in the first place? If you don't know the standards, and the pragmatic details of how they are realised in the actual browsers, then you're blundering in the dark, stuck with antiquated techniques and no real knowledge of your craft to allow you to improve. We all know how rapidly web technology advances, so why do people feel they can get away with doing things the way they did them in 1997? Eventually "good enough" won't be good enough any more.

Ultimately those who fail to adopt a professional approach to the web, preferring to say "Oh, IE's good enough", will fall by the wayside... either that or they'll be doomed to maintaining sites built to work in Netscape Navigator 3 while the rest of us build the future.

Sorry if that sounds snarky, but it's true...

[xoggoth]

Actually, usually find IE makes more sense than FF. To centre tables on screen in FF I had to put a div round everything and use

<style type="text/css">
body {text-align:center;}
div {width:100%; text-align:-moz-center;}

text-align:-moz-center; ????? WTF????

Also jscript has much more useful constructs in IE, even for things that are not security issues.

Anyway, this is mostly finished site. If you think it looks TULIPS you should have seen it before!

http://www.gatekeeperel.co.uk/


PS Oh bum! Haven't tested it in IE6!

[KevinS]

The 'Reviews' tab jumps to the left, but the others look fine. Firefox 2.0.0.11..

[ladymuck]

I always specify the height and width of any images I use in html, dunno if it will make any difference to the way the table loads though. I tend to do that rather than define the column width. It's probably very poor practise but I'm no web developer!

[expat]

...
Whilst IE is still the browser of choice for the mass population I prefer to design to that and then if someone says their Firefox or geek-browser doesn't render properly, it's their own fault for shunning the mainstream....

"Mainstream" good, standards bad?

Please God let me not say things like that, I'd be ashamed of myself.

[scotspine]

i think the main thing to pick up here is that you *ought* to be using css/external stylesheets to layout the site rather than tables. faster, efficient and, once you're accustomed to it, more flexible. it also enables you to head for a valid site in terms of xhtml and accessibility, on both of which it currently fails, and both of which will assume greater importance as the web moves on.

...and the hidden div will cause google to penalise you!

[chicane]

text-align:-moz-center; ????? WTF????

You shouldn't use moz-center - it's undocumented and likely to be removed from a future release. If you want to centre a table in Moz, give it a width and set margin-left and margin-right to "auto" rather than using undocumented css rules.

Also jscript has much more useful constructs in IE, even for things that are not security issues.

Er.... ok?

Tuliping amateurs