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.
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/
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.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With