Page design ruined as a result of oversized fonts in IE9 for <h2> elements

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?

Answer №1

I wanted to share my discovery that led to a solution.

Initially, it was believed that setting the font size for the h2 tag to 20px would result in consistent text size across browsers like IE and Firefox:

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

Surprisingly, this did not work as expected. The font size appeared much larger in IE despite setting it to 20px.

Fortunately, I observed that other text elements on the same page exhibited the same size on both Firefox and IE9. These were mostly anchors and a few label tags, not h2 tags.

By utilizing a different text style for non-h2 elements, I achieved consistent font sizes on IE9 and Firefox:

 .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 consistent in IE9 and FF</a>

My discovery revealed that cross-browser text size consistency is challenging with h2 tags in the mix. It is unclear if other header tags (h1, h3, h4, etc.) face the same issue.

Adjusting the font-size property for an h2 style does produce changes visible on both IE9 and FF. However, the h2 tag behaves differently in terms of font size comparison.

While a font-size:16px for an h2 appears larger in IE9 compared to Firefox, this inconsistency is not observed with other tags like label and anchor.

As a workaround, we opted to replace the h2 tag with a label tag to ensure identical font sizes on FF and IE9:

   .h2XtraStyle
   {
      font-size: 20px;
   }

Below is an example of a cross-browser h2 tag that looks consistent on both IE9 and FF:

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

The discrepancy in handling h2 tag font sizing in IE9 led us to eliminate its usage completely. While not elegant, this workaround effectively resolved the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

Adjust the text color of a div element by clicking a button with the help of JavaScript

I am trying to change the font color of my div when a button is clicked using JavaScript. The two buttons I have are 'Green' and 'Red'. <button type="button" class="green">Green</button> <button type="button" class="red" ...

Convert HTML content to a PDF file with Java

Welcome to the community! My project involves extracting data from a website containing information on various chemical substances and converting it into a PDF while preserving the original HTML formatting, including CSS styles. For example, here is a li ...

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

I've come across a roadblock here. The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, fol ...

What is the best way to combine table cells in HTML to create a "T" shape?

Is there a way to merge the two blank cells (one above 'Be' and one above 'B') with a large blank space in the middle? I attempted using colspan and rowspan in various ways without success. https://i.stack.imgur.com/tw5SE.png This is m ...

Establish a new <section> to serve as a distinct webpage

I have a question about creating multiple <section> elements on a page. I am looking to build an HTML document with several <section> tags, as outlined below. <html> <head> </head> <body> <sectio ...

Ways to display a collection of random images with a click of a button?

I've created a simple php webpage that is supposed to display random images from my images folder when a button is clicked. However, I'm facing an issue where no images are showing up and I can't seem to pinpoint the problem in my code. ...

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

The font implemented in Bootstrap does not appear to be adapting well to different

As I embark on the Bootstrap journey, I find that everything looks great on my desktop browser in terms of responsiveness. However, when I switch to my iPhone 6, it doesn't seem to display as expected... Provided below are a few screenshots: Desktop ...

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

Centralized and secure masthead

Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...

Looking to screen usernames that allow for the use of the DOT (.), underscore (_), and Dash (-)?

I am using jQuery to filter usernames that are exactly 3 characters long. The validation criteria includes only allowing the following special characters: ., _, and - var filter = /^[a-zA-Z0-9]+$/; Therefore: if (filter.test(currentval)) { //valid ...

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

Can search engines understand and interpret CSS files?

Upon examining various CSS files across different websites, I've noticed comments similar to the one below: /* Theme Name: CSSnewbie V2 Theme URI: http://www.cssnewbie.com Description: Second version of CSSnewbie, based on Carrington theme by Crowd ...

Tips for showcasing heading and paragraph elements side by side in css?

I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...

Variances in the order of HTML elements within an article's layout

Check out this example of HTML and CSS <!DOCTYPE html> <html> <head> <title>Floats Example</title> <style type="text/css"> .left { float:left; width:100px; } .righ ...

What is the best way to incorporate a YouTube video into my HTML webpage?

Looking to add some YouTube links to my webpage - I'm a complete newbie and clueless about formats and embedding. Can someone guide me on what to use and how to insert it into my HTML code? Appreciate any help! ...

PHP isn't sending data (even though the name tag is defined)

After reviewing numerous posts where individuals forget to include the name attribute in their input tags, I came up with a simple script: <form action="submit_form.php" method="post"> Name: <input type="text" name="name"><br> ...

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...