CSS: a collection of strange and buggy behaviours


  • Yesterday I encountered several strange CSS-related problems, which I collected in a demo page, where you can see it displayed (if you're browsing with IE) as well as the corresponding HTML source code.
    1. Sometimes IE introduces a blank line when special positioning attributes are used. What is even strange is that this behaviour changes depending on whether one of the blocks has a border or not. IE6 even omits the bullet in one case. I don't believe this can be intentional.
    2. When the first child of a list item has a left margin, the bullet is moved to the right as well to stand exactly next to the text. This is in contradiction with the CSS specs that state that the bullet should be outside the principal box.
    3. In IE6 when a block is positioned absolutely inside its parent, and the parent has some padding, then that padding is also applied to the inner block's position. This is resolved in IE7, so I'm not sure whether there is any use reporting it.
    The demo page also contains a JavaScript issue for which I posted a separate message. There is also a news thread about both these issues as well as the problem of filing a bug in the first place.
    Friday, August 03, 2007 9:38 AM