Does IE6 really prevent me from setting left / right / top / bottom width / height?
Building the site super fast and working on all my Mac browsers, I thought I would take the gander on another old Dell laptop with Windows XP and IE6.
Nothing looks remotely right. This is because I used a lot of left / right / top / bottom (constraint) declarations to size the elements in proportion to their parent's size (I didn't use percentage sizes, because percentages are relative to the parent's size before margins and padding are applied, left / right / top / bottom refer to them after position: absolute. I ask about this here :)).
In the past few weeks, I've read a lot of articles about how terrible IE6 (and IE) is in general, but for all the reasons people say to support it (large market share and fear of installing better software), and therefore half of the people at the company we are building a site to use IE6 (so they upgrade slowly to Chrome, but I'm sure if I could just get IE6 to display my limitations it might help.
So, I've been messing around with simple layouts here and they work fine in my latest Firefox, Safari, Chrome and Opera, but IE6 basically says:
Unless you have given me a width or height, I am assuming it is zero .
But position:absolute; left:0px; right:0px; top:0px; bottom:0px;
in a container that width:1000px; height:1000px;
should be the same as the setting width:1000px; height:1000px
for the child, no?
If you look at the source of this , why won't IE6 render absolutely positioned AND SIZED elements? (note: I will be messing with this file for a while)
thanks
a source to share
In short, yes , it really doesn't allow this ("absolute edge positioning"); this is a known and longstanding error. Absence width
in absolute-positioned elements always causes compressible behavior, even if the width should be output from left to right. It's the same vertically.
why does IE6 not render constrained absolutely positioned and dimensioned elements?
I don't see this in the example at the moment. In general, if you declare both edges and size (eg left + right + width), absolutely positioned elements are "overly constrained" and one of the rules is discarded to allow others to fit.
/ * tables still need "cellspacing =" 0 "markup * /
Nope. The border-collapse: collapse; border-spacing: 0;
plus combination padding: 0
on the squares makes (<thanks>) cellspacing
/ unnecessary cellpadding
.
it is clear: both; / * ie6 is required for absolutely positioned elements! * /
???
no.
a source to share
IE6 is the "oldest" browser, with major website builders still supporting heavily ... plaintively. Gradually partly because its support for the standard CSS representation is pretty spotty. The standards say to do one thing, and often enough for the IE6 engine to do another, or some mistake misleading it. A few years ago, keep in mind, IE6 was actually pretty good, at least compared to Netscape and the other big players of the day. Not anymore. People are not updated.
IF IE6 (and for the most part IE7) are the browsers you need to support, it is usually best to consider this from the moment you start working on CSS. Seeing as you've gotten past this point a bit now, I would recommend that you explore a few of the stylesheets that can target IE and especially IE6 + IE7 selectively. The most common and powerful technique, and perhaps the one you need right now, is " conditional comments ", which allow you to link in stylesheets that only certain versions of IE will read. Once you get this under your belt, you probably have to get familiar with some IE6 quirks, for example. the concept of "have a layout" .
I also recommend that you download the virtualization tool and VPC images provided by Microsoft for backward compatibility testing. They will allow you to run an instance of Windows running IE6 or IE7 on your Mac, assuming it will be a new Intel based version. Googling "VirtualBox VPC images mac" will provide you with a good list of setup tutorials. It's not difficult, but it does require some hard disk space.
a source to share