IE fieldset style problems.

NancyJ · 05-04-2006, 08:58 PM

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<title>WeQuote Windows</title>
	</head>
	<body>

		<div id = "main">
			<h1 class = "banner"><a href = "index.php"><span>WeQuote Windows</span><img src = "images/wequote.jpg" alt = "We Quote Windows" /></a></h1>
						<img src = "images/crumb2.jpg" />
						<form id = "quote" method = "get" action ="quote.php">
			<fieldset><legend>Windows</legend><div class = "row">Qty <input onfocus="setFocused(1);" id = "1" onchange ="refreshForm();" type = "text" name = "Wqty[]" size = "2" value = "1"  /> x Width(cms) <input onfocus="setFocused(2);" id = "2" onchange ="refreshForm();" type = "text" name = "Wwidth[]"  size = "3"  /> x Height(cms) <input onfocus="setFocused(3);" id = "3" onchange ="refreshForm();" type = "text" name = "Wheight[]"  size = "3" /> = </strong></div></fieldset><input type = "hidden" name = "qid" value = "" /><fieldset><legend>Doors</legend><div class = "row">Qty <input onfocus="setFocused(4);" id = "4" onchange ="refreshForm();" type = "text" name = "Dqty[]" size = "2" value = "1"  /> x Width(cms) <input onfocus="setFocused(5);" id = "5" onchange ="refreshForm();" type = "text" name = "Dwidth[]"  size = "3"  /> x Height(cms) <input onfocus="setFocused(6);" id = "6" onchange ="refreshForm();" type = "text" name = "Dheight[]"  size = "3" /> = </strong></div></fieldset><input type = "hidden" name = "qid" value = "" />			<span id = "updateButton"><fieldset><input type = "submit" value = "update" class = "getQuote" /></fieldset></span>
			</form>		
			<br class = "clear" />
		</div>
		<div id = "footer">Important links go here</div>
	</body>
</html>

CSS

Code:

html, body
{
  font-family: verdana, arial, helvetica,  sans-serif;
  font-size:100%;
  color:#000;
  background-color:#FFF;
  margin:0px;
  padding:0px;
  height:100%;
  background-image:url(../images/shadow.gif);
  background-repeat:repeat-y;
  background-position:center;
}


#main
{
  min-height: 100%;
  margin:auto;
  width:752px;
  padding:0 10px 0 10px;
  background-image:url(../images/mainbg.gif);
  font-size:0.9em;
  *height:100%;
  margin-bottom:-20px;
}
#footer
{
  height:16px;
  width:752px;
  padding:2px 10px 2px 10px;
  margin:auto;
  background-color:#3CF;
  border-top:1px solid #000;
  font-size:0.8em;
}
br.clear
{
  height:20px;
}
#main h1.banner
{
  margin:0px;
}
#main h1.banner span
{
  display:none;
}

form#signup
{
  float:right;
  width:300px;
  padding: 10px;
  background-color:#FFF;
border:5px solid #000;
}
#signup fieldset
{
  border:0px;
}
#signup label
{
  width: 100px;
  font-weight:bold;
  float:left;

}
input, textarea
{
  border:1px solid #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin-bottom:2px;
  background-color:#dff6fd;
}
input.getQuote
{
  background-image:url(../images/getquote.gif);
  width:105px;
  height:62px;
  border:0px;
  font-weight:bold;
  font-size:1em;
  float:right;
border-color:#FFF;
  
}
fieldset{
  border:5px solid #000;
  border-top-width:23px;
  background-color:#FFF;
  padding:10px;
  margin:20px;
}
legend{
  color:#FFF;
  background-color:#000;
  height:17px;
  font-weight:bold;
  padding:3px;
  margin:0px;
}
a img{
  border:0px;
  }
}

the url is www.we quote windows.co.uk/quote.php if you look at it in firefox, thats how its supposed to look but in IE, it looks wrong. Any ideas?