Everything looks great on various browsers, except for the notorious IE9.
We've implemented a block-style layout with a width of 660px, centered on the page.
Despite setting the h2 width to 660px to match the layout, IE9 displays the font size much larger, causing it to overflow the designated width.
Is there a way to adjust the h2 text to prevent this from happening by shortening it?
Unfortunately, I don't have control over the content on the page, that falls under the responsibility of the 'UE' gal.
Below is the CSS style I've used:
h2 {
width: 660px;
}
This width setting is consistent with other elements on the page, creating a visually appealing block layout.
However, on the landing page, the h2 text appears significantly larger on IE9, exceeding the 660px width due to the increased font size.
For example, the following line is causing issues:
<h2 class="grayDecorative">Make your Relics visible on our site now! -- OurSite!</h2>
Here is the 'grayDecorative' style being used:
.grayDecorative
{
font-family: Arial, sans-serif;
background-image: url('images/chromishbg.gif');
background-repeat: repeat-x;
}
This style adds a visually appealing gradient background to the h2 text.
One solution I'm considering is using a conditional statement for IE9 to switch to an h3 tag instead of h2, but only for IE9.
How can I implement this conditional HTML to use an h3 tag for IE9?