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:

Code CSS:
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