Does IE6 Really not Allow Me to set width/height from left/right/top/bottom???

Question

Building a site super quick and having it work on all my Mac browsers, I thought I'd take a gander on a friends old dell laptop with Windows XP and IE6.

Nothing looks remotely correct. It's because I used lots of left/right/top/bottom (constraint) declarations to size elements proportionally to their parent's size (I didn't use percent sizes because the percents refer to the parent's size before margins and padding are applied, left/right/top/bottom refer to them after with position:absolute. I'm asking about that here :)).

I've read lots these past few weeks on how horrible IE6 (and IE) is in general, but because of all the reasons people say to support it (large market share and the fear of installing better software), and because half the people in the company we're building a site for use IE6 (getting them to upgrade to Chrome slowly but surely), I thought if I could just get IE6 to render my constraints, that might help.

So I am messing around with simple layouts here, and they work fine in my latest versions of Firefox, Safari, Chrome, and Opera, but IE6 is basically saying:

If you haven't set a width or height on me, I'm assuming it's zero.

But position:absolute; left:0px; right:0px; top:0px; bottom:0px; on a container that's width:1000px; height:1000px; should be the same as setting width:1000px; height:1000px on the child, no?

Taking a quick look at the source for this, why won't IE6 render the constraint based absolutely positioned AND SIZED elements? (note: I will be messing around with that file for a while)

Thanks

Answer 1

In short, yes, it really doesn't allow this (“absolute edge-positioning”); it's a well-known and long-standing bug. Missing width on absolute-positioned elements always triggers shrink-to-fit behaviour even if width should be deducible from left/right. Same vertically.

why won't IE6 render the constraint based absolutely positioned AND SIZED elements?

I don't see that in the example at the moment. In general if you declare both edges and a dimension (eg. left+right+width), an absolutely-positioned elements is ‘over-constrained’ and one of the rules is discarded to make the others fit.

/* tables still need 'cellspacing="0"' in the markup */

Nope. A combination of border-collapse: collapse; border-spacing: 0; plus padding: 0 on the cells renders cellspacing/cellpadding unnecessary (thank goodness).

clear:both; /* ie6 requires for absolutely positioned elements! */

???

no.

Answer 2

IE6 is the “oldest” browser that mainstream web developers still largely support... begrudgingly. Begrudgingly in part because its support standard-compliant rendering of CSS is rather spotty. The standards say to do one thing, and often enough the IE6 engine does another, or some bug leads it astray. Years ago, keep in mind, IE6 was actually quite good, at least compared to Netscape and the other big players of the day. Not any more. Folks haven't upgraded.

IF IE6 (and, for the most part, IE7) are browsers that you need to support, it is generally best to keep that in mind from the moment you start working up the CSS. Seeing as you're a bit past that point already, I'd recommend you look into a number of the ways styles can be targeted at IE and particularly IE6+IE7 selectively. The most common and powerful method, and probably the one you're in need of now, is "conditional comments", which allow you to link in stylesheets that only certain versions of IE will read. Once you've got that under your belt, you'll probably need to get acquainted with some of IE6's quirks, e.g. the concept of "having layout".

I also recommend that you download a virtualization tool and the VPC images provided for backwards-compatible testing by Microsoft. These will allow you to run a Windows instance with IE6 or IE7 on your Mac, assuming it's of the newer Intel-based variety. Googling "VirtualBox VPC images mac" will get you a nice list of configuration tutorials. It isn't complicated, but it does take some hard disk space.