PDA

View Full Version : IE fieldset style problems.



NancyJ
05-04-2006, 09:58 PM
HTML


<!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


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?