(I've seen Eric A. Meyer's note that says that the thread is off-topic, but
at least on browsers with native support to the <header> element, I think
there's a genuine CSS issue - see below.)
Michael Bierman wrote:
I'm trying to use modernizer (http://www.modernizr.com/) 1.6 which
seems to work well except for the following:
I am using the <header> element. I am unable to style it however.
It seems that even browsers that natively support the HTML5 proposed element
<header> fail to do that properly - assuming that proper support includes
treating it as a block level element by default. You can see this easily if
you use <header> with some border setting and test it on Firefox.
Apparently this can be cured by using
header { display: block; }
<header>
<H1 id=Name><A id=top></A>Michael Bierman </H1>
<P class=Contacts>email:-deleted-| webaddress... </P>
</header>
I'm not sure the markup qualifies as conforming to HTML5 drafts - in
particular, using an <A> element with empty content does not quite
correspond to the spirit. But syntactically the markup matches HTML5
productions and should get styled OK.
When I look in Explorer, I see the following nodes:
<H1 id=Name><A id=top></A>Michael Bierman </H1>
<P class=Contacts>email:-deleted-| webaddress... </P>
</header/>
I don't see what you mean by seeing nodes, but on Internet Explorer 8, the
Modernizr trick, or simply the Javascript invocation
document.createElement("header"), the <header> element becomes a styleable
element in the document tree. However, on IE, there are two distinct issues:
a) the element is (CSS-wise) inline by default; the cure mentioned above
helps here, too
b) for some odd reason, the entire <header> element is ignored if it is the
first element inside the <body> element; try adding "Hello world" before it,
and you'll see a difference; oddly (and happily) enough, setting display:
block for the <header> element helps here, too (and maybe so does any CSS
setting on it...).
So of course no css was working on the header tag.
On my copy of IE 8, your code works when I set e.g. header { color: red }.
So it's really just the display property of the element that causes us some
problems.
The following hack
works, but seems contrary to modernizer's usage:
<header>
<div id="header">
<h1 id=Name><A id=top></A>Michael Bierman </h1>
<p class=Contacts>email:-deleted-| webaddress... </p>
<div>
</header>
Yes it helps, but it's rather clumsy. Using Modernizr _and_ setting display:
block on <header> makes it styleable apparently on all browsers worth
mentioning (any graphic browser like IE 6 or more modern).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
