page layout destroyed due to IE9 fonts too large for <h2>

Question

The page layout is fine in all browsers but IE9.

We use a block-style layout on the page and a width of 660px, centered.

In keeping with the 660px max width, I set a width for h2 of 660px which is fine in all browers except (surprise surprise) on IE9 the h2 font is HUGE and runs off the right of the 660px layout by a huge amount.

Can I change the verbiage in the h2 to alleviate this (shorten the text)?

Nope. The verbiage on the page is not my purview -- someone else's job ('UE' gal).

This is my CSS:

    h2 {
        width: 660px;
    }

That width of 660px is used in other divs on the page and provides a visually appealing 'block layout' on the page.

But on the landing page, the text inside of one of the h2 tags -- the h2 text is massively larger on IE9 so the 660px width is exceeded by the large IE9's h2 font size.

Here is an example of an offending line:

   <h2 class="grayDecorative">Make your Relics visible on our site now! -- OurSite!</h2>

Here is the 'grayDecorative' style:

   .grayDecorative
   {
      font-family: Arial, sans-serif;
      background-image: url('images/chromishbg.gif');
      background-repeat: repeat-x;    
   }

This style fills in the h2 with a visually appealing gradient background behind the text.

I'm thinking to solve this by having a 'conditional-for-IE9' that uses, say -- an h3 tag instead of the h2 tag -- but only on IE9.

How can I make the html conditional to use an h3 for IE?

Answer 1

I want to post the discovery I made that led to a solution.

I and others thought that using the following style should make the font size the same for the h2 tag's text on IE and FF et al:

     h2
     {
         width: 660px;
         font-size: 20px;
     }

Setting the same font-size for the h2 tag should have done the trick. BUT IT DIDN'T. For the same font-size: 20px above in the h2 tag, the IE text font was much bigger.

Well I got lucky when I noticed -- other text elements on the same page were the exact same size on FF and IE9. But these tags were not h2 -- they were anchors mostly and a couple label tags.

The following text style generated text in the exact same size on IE9 and Firefox -- but note that the tag below is not the h2 tags which is the one I was having text-sizing problems with:

 .pageTopRowTextStyle
 {
      color:RGB(255,255,255); 
      text-decoration:none;
      font-family: Arial, sans-serif;
      font-size: 15px;    
 }

 <a class="pageTopRowTextStyle" href="oursite.com">
              This text size was the same in IE9 and FF</a>

Here's what I discovered. Mind you this is what we found with IE9.
You cannot reliable reconcile cross-browser text-size difference if the h2 tag is involved. I didn't check the other header tags (h1, h3, h4, etc).

I'm assuming the same issue.

While using the font-size: 20px; setting for a style on h2 DOES make a difference -- say, if you increase to 25px or down to 15px -- you can see the font size changing on both IE9 and FF ---

-- the h2 tag is not responding in the same way to the font-size ??px across FF and IE9.

With the h2 tag -- a font-size:16px on IE9 is bigger the same font-size:16px for an h2 on Firefox. That's not true with other tags though -- label and anchor tags render the same size on both browsers.

So we just shitcanned the h2 tag and we are now using a label tag in place of the h2 tag and now the font sizes on FF and IE9 are identical:

   .h2XtraStyle
   {
      /*width: 660px;  LABEL doesn't recognize 'width' so we used   padding */
      font-size: 20px;
   }

Here is a cross-browser h2 tag -- looks the same on IE9 and FF

    <br />
    <label class="h2XtraStyle">Make your Relics visible on our site now! -- OurSite! 
         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </i></label>
    <br />

I don't really know why the h2 tag's font sizing is handled differently in IE9 but the workaround is not to use it at all. Our solution is not very elegant but it did the job.