[whatwg] Bad CSS on the multipage version

[Philip Taylor]

On 04/06/2008, Křištof Želechovski <giecrilj at stegny.2a.pl> wrote:
> Regarding your page at the URL
>  <http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level.html
>  #the-embed>:
>  [...]
>  Element headings (level 4) are invisible
>  (obscured underneath the following content).

Seems to be an IE CSS bug like in
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A%3Cstyle%3E%0D%0A%20.a%20%7B%20border%3A2px%20blue%20solid%20%7D%0D%0A%20.b%20%7B%20border%3A2px%20green%20solid%3B%20background%3Ayellow%3B%20margin-top%3A-0.8em%20%7D%0D%0A%3C%2Fstyle%3E%0D%0A%3Cdiv%20class%3Da%3EThis%20text%20should%20be%20visible%20on%20top%20of%20the%20yellow%0D%0A%20%3Cdiv%20class%3Db%3E...%3C%2Fdiv%3E%0D%0A%3C%2Fdiv%3E

That case fails in IE7; it works in IE8 (and in recent versions of
Firefox, Opera, Safari, Konqueror).

I don't know if there's a 'proper' way to fix this, but adding
   h4 { position: relative; }
into the page's CSS makes it work correctly in IE7, and doesn't affect
any other browser.

-- 
Philip Taylor
excors at gmail.com