Fix fieldset background color in Internet Explorer

So, you like Internet Explorer ? Me neither. Oh, don’t get me started… But sometimes we need to ship pages with support for Internet Explorer because there are still people out there to lazy to install a web browser.

Because of this, I decided to start an article series on fixing some everyday, more or less complicated, Internet Explorer issues. For the first article, I’ve chosen a very popular problem: changing the background color of fieldsets in Internet Explorer. As you may know, as soon as you change the color of the fieldset’s background, you’ll see that the color of the background will bleed at the top of the fieldset:

As you will see in the followings, it’s not a complicated fix.

Let’s start with our HTML file:

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <link href="fieldset.css" rel="stylesheet" type="text/css" />        
    </head>
 
    <fieldset>
        <legend>De gustibus non disputatum est</legend>
 
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </fieldset>
</html>

I kept it simple: a linked stylesheet, a fieldset and a paragraph inside that fieldset. The stylesheet contains the following css which sets a background color and a width for the fieldset:

1
2
3
4
5
6
/* contents of fieldset.css */
fieldset
{
    width: 300px;
    background-color: #dddddd;
}

After you did this you will notice, in Internet Explorer, the background color will leak on top of the fieldset. This problem is caused by the legend tag being rendered visually inside the fieldset. So, to fix it, we will change the positioning of the legend tag.

We will build the fix for the fieldset issue in a separate file called fieldset_ie.css:

1
2
3
4
5
6
7
8
9
10
11
12
/* contents of fieldset_ie.css */
fieldset
{
    position: relative;
    padding-top: 1em;
}
 
legend
{
    position: absolute;
    top: -0.7em;
}

What we did above was to change the positioning mode of the legend into an absolute positioning. This will re-insure us that the legend will not be part of the fieldset’s flow. The second thing we want to take care is change the position of the legend. Because we changed the positioning mode, now the legend will be inside the fieldset, overlapping the paragraph. In order to fix this, we will add a negative top position for the legend of -0.7em. What this mean, is the legend will be 70% of its height higher than the original position. Also, we take care that the legend will be positioned relative to the fieldset, and not to the entire document, by changing the positioning mode of the fieldset to relative.

Also, you will see that now the fieldset will not have anymore the top padding that it originally had. So if you feel necessary, you can also add a 1em top padding for the fieldset.

After this, we don’t want fieldset_ie.css to apply to other browsers than Internet Explorer, so we will use conditional comments to add the stylesheet only for IE browsers:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <link href="fieldset.css" rel="stylesheet" type="text/css" />
        <!--[if IE]>
            <link href="fieldset_ie.css" rel="stylesheet" type="text/css" />
        <![endif]-->
    </head>
 
    <fieldset>
        <legend>De gustibus non disputatum est</legend>
 
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </fieldset>
</html>

You should now observe that your fieldsets look nice and smooth in all browsers and also in Internet Explorer application.

In normal practice, you will have a CSS file with all this internet explorer stupid fixes. Maybe I will cover in a next article an example of such a fix CSS. Until next time, I hope you’ll not have to deal with this stupid browser application thing.

Comments

10 Responses to “Fix fieldset background color in Internet Explorer”
  1. Iv says:

    This is exactly what I needed! Thanks a lot :)

  2. Bosse G says:

    Excellent just what I was looking for…many thanks

  3. John M says:

    This only works in IE9. If you look at the ‘fix’ in ie 7 or ie8 the text is unreadable and the legend covers part of the fieldset.

  4. Jonathan Styles says:

    I was a bit angry reading the “people still use Internet Explorer because they are too lazy” bit. When writing an article, an elevated sense of professionalism is normally required. Many people (including myself) use IE for many reasons.

    Some people are required to due to work restrictions and the inability to install new software packages. Some people are not very knowledged on software packages, and do not realize that they can install and use new browsers. Then, some (like myself) just like Internet Explorer.

    I grew up with it. It was always better and ahead of Netscape (at the time). Plus, it is an integral part of Windows and always running in the background anyhow. I have used multiple browsers while developing – FireFox, Chrome, Konquerer, Opera, and Dolphin – to name a few. I always find myself drawn back to Internet Explorer for some reason or another. Unsure if it is because of my familiarity with it, or just because of the annoying little flaws I find here and there in the other packages that I do not stumble upon in IE. Either way, just because a person uses Internet Explorer, gives no one the right to judge him or her simply because they do not use it.

    Just my little bit. Enjoy!

  5. Keins says:

    Thanks a lot. Worked like a charm!

  6. Krishna says:

    Helped to work it quickly. Thank you very much.

  7. sathya says:

    Thanks a lot !.It works

  8. Hello colleagues, its impressive post about educationnd fully defined, keep it up all thee time.

  9. I do believe all the concepts you have offered in your post.
    They are really convincing and will certainly work.
    Still, the posts are very short for starters. May you please lengthen
    them a little from next time? Thank you for the post.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!