All posts in CSS

Microsoft redesigns their web site. Visually very nice, follows the “a wide vista” theme as previous one (although I prefer this incarnation).

The gem is under the hood. CSS-based all the way, most obvious by turning CSS off in your browser. Plus, only 5 errors coming from the validator.w3.org, for the HTML 4.0 Transitional. Much can be said on the quality of the code (way too many divs for starters) but really a nice step forward – they missed the validity perfection by only an inch.

The most important aspect – the site looks and works identical in Firefox, as in IE6. Now, that is huge and very welcome step forward for Microsoft.

This post is more of a reminder for me than anything new, as I need this splash thing from time to time and never can remember where I keep it.

95% of code is from Dušan Janovský. I merely simplified it, thus instead of 3 or 4 nested divs, you need just one div, for the actual content. html and body play the role of table and table-cell respectivelly. Pure semantics. :)
For IE6 and IE7, I opted for the expression property, masked under conditional comments. No other solution I encountered is flexible enough.

This solution has 100% of the available height to spread, because there is no fixed height set for the content div.

I’m not even sure this is a bug. IE5/Mac, IE6 and IE7 does it one way, Firefox, Opera, Safari another. Past experience on such things tells me this is a bug in IE, but it could also be that CSS spec is not specific enough on this issue and that browser makers chose different paths.

Anw, to the issue. Imagine floated element followed by an element which is absolutelly positioned (AP) and have this style applied:

display:block;


position:absolute;


top: 0;


width: 30em; 

You see, no left rule. IE will position the left edge of the AP at the point where right edge of the floated element is:

Opera/Gecko/KHTML will place it at the left:0 of the content area of the parent (which is what I would expect it to do):

Applying clear:both to the AP element has no effect, things stays the same. I have seen this behavior in IE6 several times, but I keep forgetting it and it hunts me again along the way, when I least need it. This way, I will probably remember it. I hope some of you might find this useful too.

Remember this?

* html SELECTOR { height: 1% } 

This is one of the ways you can force IE6 to clear the floats in a container. And it partially works in IE7 too. The reason height:1% works is that IE7 internal engine is same as IE6, just with a lot less bugs in it. Why is float clearing a problem then? Because this part of the selector: * html does not work anymore — that bug is fixed.

However, IE7 still incorrectly interprets height:1% rule and will automatically expand the height of the box in question if its floated content can’t fit. Thus, that trick is still a viable solution to float clearing, especially since IE7 does not support :after selector yet, thus the solution working in all other modern browsers is not usable:

SELECTOR:after {


	content: "."; 


	height: 0; 


	display: block; 


	visibility: hidden;


	overflow: hidden;


	clear: both; 


} 

The way forward

The * html will not match anything in IE7 and will have no effect at all. This also is an ugly hack: we use one IE bug applied through another IE bug. Ugly. Such hacks should be used only as last resort, when no other solutions are available. And IE has perfect solution available, called conditional comments.

Thus, using conditional comments the height:1% is still a fine solution for float clearing. However, there is a better one. IE7 now supports min-height rule (among others) and that rule also triggers the infamous hasLayout property in IE7 internal engine and thus it is usable for float clear.

SELECTOR { min-height: 0; } 

This is simple to use (just put it at the start of your CSS file) and enumerate the elements which content should be cleared — the same list you use for IE6. And all is fine, because this can sit in your main .css file and no modern browser would choke on it.

IE7 has good enough support for the CSS2.1 that you should very rarely need to write IE7-only hacks, thus have little use for separate file containing IE7 tweaks. Actually, the float clear is the only thing I needed to change in all the sites I created in the last few years to make them working in IE7.
What a welcome change.

I have encountered one ugly bug in IE7 rendering engine, which you could see in the last week at the main navigation of this site (at the top). It manifests when hovering items that has submenus, in which case nested list of items appears, like this:

However, in IE7 you would’ve seen this:

I had no idea what caused this, even asked in IE’s web dev forum without any answers received. Then, last night, while working on new version of this two-level navigation, I realized that it works, with bare styling. After an hour or so spent dissecting the CSS rules one by one, I found the culprit.
I have used the following rule to style the curently hovered main item:

ul.navig li:hover a {


	color: #000;


	background-color: #ff4500;


} 

The problem is the background-color rule. As soon as you remove it, sub-items re-appear. I have changed the style into this, which does not trigger the bug:

ul.navig li:hover {


	background-color: #ff4500;


}


ul.navig li:hover a {


	color: #000;


} 

Take a look at the example page which illustrates the problem. This is the nastiest IE7 bug I have encountered so far.

Apart form this, IE7 did not bring much problems. It is a very good release where most of the IE6 bugs are resolved. Some have remained though, like z-index problems. The lack of support for the :after pseudo-selector requires you to use zoom:1 in all places where you have used height:1% previously — in the IE7 only styles hidden by cond. comments (there are other solutions as well).
One another bug have remained too, again with this type of navigation, which I will demonstrate in another post.