Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is HTML Legend tag text color different in IE vs other browsers

Tags:

html

Perhaps I am missing something very obvious but why does the following HTML produce text in the legend that shows up blue in Internet Explorer but black in other browsers?

<html>
    <head>
    </head>
    <body>
        <fieldset font-italic="True">
            <legend style="font-size: 24px; font-weight: bolder;">This is a test</legend>
        </fieldset>
    </body>
</html>

I would like the color to be common among each browser so I am explicitly setting the color to black. But I am curious why there is a difference here.

like image 657
MisterXero Avatar asked Jan 19 '11 19:01

MisterXero


3 Answers

Without knowing which IE specifically you are talking about, you should know that each browser has its own set of default style attributes which are applied whenever the designer fails to explicitly specify a style of his own.

A good fix for this problem is to employ the CSS reset, which reduces every element's style down to basically nil.

http://meyerweb.com/eric/tools/css/reset/

like image 149
Jarrod Nettles Avatar answered Sep 19 '22 00:09

Jarrod Nettles


Different browsers = different defaults. This is why some people (but not I) use a CSS reset stylesheet like this one from Yahoo.

EDIT:

I don't like to use a reset because it adds a lot of rules that you probably don't need and many that you'll overwrite, which creates extra work for the user's browser (which is probably running on a slower machine than yours). I prefer to be very explicit in my own CSS to make sure I've covered my bases, but I don't think there is anything wrong with using one if you want to.

like image 31
Paul Avatar answered Sep 20 '22 00:09

Paul


Also keep in mind that the legend in IE has a offset from the left of 7 pixels :)

You can easily correct this by telling IE to have a margin for legends with

margin: 0 -7px;
like image 36
Sander Avatar answered Sep 19 '22 00:09

Sander