DEV Community

Discussion on: Bullseye! 4 ways to center that damn div with CSS

Collapse
 
merri profile image
Vesa Piittinen

Just for the sake of completeness, I think this is what one had to write when also avoiding browser specific stylesheets:

.parent {
    height: 200px;
    line-height: 197px;
    text-align: center;
    width: 200px;
}

/* probably has to be given to a "natural" inline HTML element */
.child {
     display: inline;
     zoom: 1;
     display: inline-block;
     height: 100px;
     line-height: normal;
     text-align: left;
     vertical-align: middle;
     width: 100px;
}

The hasLayout stuff was undocumented feature based on old layout engine for Windows applications. When CSS was added into IE they just continued to use the old layout engine despite it being not compatible with CSS. The way they worked around issues was to link some particular HTML elements and CSS properties that would trigger hasLayout internally to mimick CSS behavior as well as they could, but that would ultimately not work that well as can be seen by the amount of issues IE continued to have during the entirety of it's lifespan. I guess this is a good enough summary that doesn't lie too much :)

It was impossible to learn CSS by using IE6, there were simply so many times the browser didn't follow what was written in the standards. I learned CSS when Firefox was released: for the most part it did exactly what was written in the standards, and you would get the results you expect when expirementing. With IE you'd continuously find inconsistencies, because you either didn't trigger hasLayout or you triggered it accidentally by using "wrong" HTML element or CSS property. It was nice to find info on hasLayout some ten years ago somewhere on the web, it was enough so that I could start writing stylesheets where all CSS was in one place instead of having browser specific ones.

Now the only problem is that I still remember how to work with these legacy browsers and nobody needs the knowledge anymore :D