Here's a small HTML page that illustrates the problem:
<html>
<body style="background: blue;">
<fieldset style="width: 500px;">
<form>
<legend>This is my form</legend>
<p>Enter some text: <input type="text"></p>
<p><input type="submit" /></p>
</form>
</body>
</html>
The border looks normal, however, in the other browsers I tested: Chrome 30.0.1599.69 m and Firefox 24.0.
I found a simple workaround, which is to explicitly set the border style for the fieldset tag:
<fieldset style="width: 500px; border: 1px solid white;">
This cleans up the border like so:
And it continues to look fine in Chrome and Firefox.
Of course, you could do the same thing in a CSS file if you prefer:
fieldset {
border: 1px solid white;
}
Hello,
ReplyDeletethank you for this article. Now, I know, that it's a bug in IE and not my fault...
Something similar is described here:
https://gist.github.com/827956/31303920733a98805cd46915c249ec788cfca6a6
Best regards
Vasssek