ie8 and ie9 em font issue and % interpretation issues?

Hello all,

Please take a look at the following page:

http://tinyurl.com/6qu3dyv

By looking into good browsers and IE you will find two issues:

1)
The point was to have the background narrow then the line-height so, I’ve come up with this:

article header hgroup h1 {
   display:inline-block;
   padding-top: 5px;
   margin-right:2px;
}

article header hgroup h1 span {
   display:inline-block;
   background: #d8e5e4;
   font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
   padding-left: 2%;
   line-height: .9;
   font-size: 2.6em; <-- ON IE 9 (at least) we get a HUGE font instead of the desired size like seen on good browsers;
}

ISSUE:
The font size on hgroup h1 span is HUGE.
The way I found to “fix” was to pass that font-size declaration to it’s parent - is this ok ?

2)
article is taking 70% of something else, but not the intended container.
As you can see, ALL article content is to narrow when compared with the same article rendered on good browsers.

Haven’t found any way to properly solve this.
Any clue ?

k. regards,
mem

That sounds OK. But why do you have two hgroups, and multiple h1s inside them? That’s not how these elements are meant to be used.

Actually I was in doubt there. I’m having two hgroups because, on that page, I actually could read them as two header groups I believe.
Also, by doing that I would have two natural containers in order make them inline 2 by 2.
At end, I notice I had no validation error throw regarding that, so, it seems ok to me.

But what do you say?

No clue about the second issue ? :slight_smile:

The issue 2 is solved. It was due to the fact that I was seeing the all thing on IE on a 1024 resolution, and I end up forgetting one rule.
So, all ok. :slight_smile:

Yes, but you are using elements in a way they are not designed to be used for presentational purposes only. A better way is to use CSS (and maybe a few small hooks) to style them. For example, in that instance all you need is a single <h1> with some spans to help you style the heading as you want.

Let’s investigate… :slight_smile:

True. We can consider that by doing that I’m grouping elements that, semantically, have no reason to be like that, so it’s only a visual thing, hence, a non-semantic element should be used to group those 4 single words, 2 by 2.
If, however, those words would make sense (semantically) to be grouped 2 by 2 (regardless the visual disposition), then I still believe two hgroups may have some sense.

As you said, a span ( and a <br />) inside a h1 could do the job there.

We would leave hgroups for “titles and subtitles” or even two titles of the same hierarchy if and only if, no outline get’s offended ?

Cheers,
m.

But there’s no need anyway. You can set spans to display: block if you need them on separate lines. You just have one heading there, so better to use one only and save on all those headings and hgroups. (hgroup is a silly idea anyway, IMHO. A subtitle is not a heading.)

OFFTOPIC

After carefully reading the documentation, I believe we are NOT allowed to have two headings of the same hierarchy on a header group.
http://dev.w3.org/html5/markup/hgroup.html

At the limit we can set spans everywhere and we don’t even need h1 or p. We have h1 and p, because we understand that it would be important to preserve a difference because, we believe, those two things, try to accomplish, semantically, two different goals. One says: “hey, this is something important” the other says “hey, this is not that important as the first but perhaps, you may want to read it”;

You are telling me that a subtitle is not a heading. In the say way that a wheel is not a car.
But we sure can conceive a subtitle as part of a heading or can’t we ?

“Plato’s Republic Comprehension Book - A guide to better understand books IV and V”

<hgroup>
<h1>Plato's Republic Comprehension Book</h1>
<h2>A guide to better understand books IV and V</h2>
</hgroup>

We can, of course, make all this a single h1, the same way we can make all with a span. But if we make that distinction here, and divide those on a hgroup with two different headings we are semantically saying more then just one heading.

We are telling, of those important things, the h1 is important, and the h2 is less important. But they both are important.

We don’t get that semantic finesse by having all on a h1.
And you don’t have that finesse if we make:

<h1>Plato's Republic Comprehension Book</h1>
<p>A guide to better understand books IV and V</p>

At the bottom line, we are trying to investigate a draft recommendation, that may even cease to exist on some time, but if one hgroup exists, I don’t see why not. :slight_smile:

“Plato’s Republic Comprehension Book - A guide to better understand books IV and V”

Yes, I’d probably call that all part of the one heading, myself. I was thinking of something a bit more separate as a subtitle. One consideration would be—what is a blind person going to hear? They’ll hear that quoted text as one long title, which is perfectly fine. So my inclination would still be to mark that up as a single heading, with a span for styling if I wanted some kind of visual effect. A separate heading should really be used to identify a subsection of the text following the main title.

<h1>Heading <br> Heading</h1>

perfectly valid.