I thought the <fieldset> tag was a block-level element with a border, some padding, and some margins added automatically. But strange things start happening when you float two fieldsets side by side. Check out the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
form { margin: 0; }
.left {
width: 210px;
float: left;
margin: 0;
border: 0;
background-color: #fcf;
padding: 0;
position: static;
}
.right {
margin-left: 210px;
border: 0;
background-color: #fcc;
padding: 0;
width: 200px;
position: static;
}
-->
</style>
</head>
<body>
<form>
<fieldset class="left">
<legend>Legend 1</legend>
<p>Some paragraph text</p>
</fieldset>
<fieldset class="right">
<legend>Legend 2</legend>
<p>Some paragraph text</p>
</fieldset>
</form>
<div class="spacer"> </div>
<form>
<div class="left">
<h4>Legend 1</h4>
<p>Some paragraph text</p>
</div>
<div class="right">
<h4>Legend 1</h4>
<p>Some paragraph text</p>
</div>
</form>
</body>
</html>
Look at it in Firefox, Moz, IE, Safari, the whole nine yards. Safari and Opera seem to treat the fieldset tag like any other block element. All the others don't.
The #left fieldset is floated left and given a width of 210px. The second fieldset is given a left margin of 210px. Most browsers float the #left fieldset left, then place a 210 pixel margin between that and the #right fieldset.
Replace the fieldset tags with DIVs and the legend tags with H4 tags and it works fine.
So. Who's right? Mozilla and IE, or Opera and Safari?The definition for fieldset is a bit weird on the w3c in that it's defined "flow" rather than block or inline. Definitely strange but I can make IE and FF look about the same by removing the margin from .right and floating it left.Originally posted by ray326
Definitely strange but I can make IE and FF look about the same by removing the margin from .right and floating it left.
Me too, but Safari and Opera do not react that way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
form { margin: 0; }
.left {
width: 210px;
float: left;
margin: 0;
border: 0;
background-color: #fcf;
padding: 0;
position: static;
}
.right {
margin-left: 210px;
border: 0;
background-color: #fcc;
padding: 0;
width: 200px;
position: static;
}
-->
</style>
</head>
<body>
<form>
<fieldset class="left">
<legend>Legend 1</legend>
<p>Some paragraph text</p>
</fieldset>
<fieldset class="right">
<legend>Legend 2</legend>
<p>Some paragraph text</p>
</fieldset>
</form>
<div class="spacer"> </div>
<form>
<div class="left">
<h4>Legend 1</h4>
<p>Some paragraph text</p>
</div>
<div class="right">
<h4>Legend 1</h4>
<p>Some paragraph text</p>
</div>
</form>
</body>
</html>
Look at it in Firefox, Moz, IE, Safari, the whole nine yards. Safari and Opera seem to treat the fieldset tag like any other block element. All the others don't.
The #left fieldset is floated left and given a width of 210px. The second fieldset is given a left margin of 210px. Most browsers float the #left fieldset left, then place a 210 pixel margin between that and the #right fieldset.
Replace the fieldset tags with DIVs and the legend tags with H4 tags and it works fine.
So. Who's right? Mozilla and IE, or Opera and Safari?The definition for fieldset is a bit weird on the w3c in that it's defined "flow" rather than block or inline. Definitely strange but I can make IE and FF look about the same by removing the margin from .right and floating it left.Originally posted by ray326
Definitely strange but I can make IE and FF look about the same by removing the margin from .right and floating it left.
Me too, but Safari and Opera do not react that way.