Hi,
Yes things are not always as straight forward as the examples show and there will always be something different that you have to cater for and most times you would style these uniquely.
I do have a couple of little demos to show a few variations which may help.
the first shows one label with multiple inputs.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#form1 label {
float:left;
width:8em;
clear:both;
text-align:right;
padding:0 1em 0 0;
}
#form1 .controls {
overflow:hidden;
width:200px;
display:block;
}
#form1 input {
margin:0 0 .5em
}
#form1 div {
overflow:hidden;
width:100%;
margin:1em 0;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<fieldset>
<legend>Form example</legend>
<div>
<label for="address1">Address:</label>
<span class="controls">
<input type="text" name="address1" id="address1" />
<input type="text" name="address2" id="address2" />
<input type="text" name="address3" id="address3" />
</span></div>
<div>
<label for="address4">Address block 2:</label>
<span class="controls">
<input type="text" name="address4" id="address4" />
<input type="text" name="address5" id="address5" />
<input type="text" name="address6" id="address6" />
</span></div>
<div>
<label for="address7">Address block final:</label>
<span class="controls">
<input type="text" name="address7" id="address7" />
<input type="text" name="address8" id="address8" />
<input type="text" name="address9" id="address9" />
</span></div>
</fieldset>
</form>
</body>
</html>
The second shows another variation with inputs lined up at the bottom of the text.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
form{margin:0;padding:0}
input{vertical-align:middle}
fieldset{border:none;}
.formtest{
line-height:1.2em;
margin:1em 0;
position:relative;
width:100%;
}
.formtest label {
float:left;
width:150px;
clear:both;
text-align:right;
padding:0 15px 0 0;
}
.formtest .controls {
overflow:hidden;
width:200px;
display:block;
}
.formtest input {
margin:0 0 .5em
}
.formtest div {
overflow:hidden;
width:100%;
margin:1em 0;
}
.test2 input{
clear:both;
float:left;
margin:-20px 0 0 165px;
position:relative;
}
.test2 div {
float:left;
clear:both;
overflow:visible;
margin:0;
padding:1em 0 0;
}
</style>
</head>
<body>
<form id="form1" class="formtest" method="post" action="">
<fieldset>
<legend>Form example</legend>
<div>
<label for="address1">Address:</label>
<span class="controls">
<input type="text" name="address1" id="address1" />
<input type="text" name="address2" id="address2" />
<input type="text" name="address3" id="address3" />
</span></div>
<div>
<label for="address4">Address block 2:</label>
<span class="controls">
<input type="text" name="address4" id="address4" />
<input type="text" name="address5" id="address5" />
<input type="text" name="address6" id="address6" />
</span></div>
<div>
<label for="address7">Address block final:</label>
<span class="controls">
<input type="text" name="address7" id="address7" />
<input type="text" name="address8" id="address8" />
<input type="text" name="address9" id="address9" />
</span></div>
</fieldset>
</form>
<form id="form2" class="formtest test2" method="post" action="">
<fieldset>
<legend>Form example 2</legend>
<div>
<label for="name">Please enter your name into this field :</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="name">Age :</label>
<input type="text" name="age" id="age" />
</div>
<div>
<label for="name">Please enter something into this box so we can see what you are talking about : </label>
<input type="text" name="text" id="text" />
</div>
<div>
<label for="name">More stuff :</label>
<input type="text" name="more" id="more" />
</div>
<div>
<label for="name">and more stuff :</label>
<input type="text" name="more2" id="more2" />
</div>
</fieldset>
</form>
</body>
</html>
Back to your original problem - what is the exact problem you have with IE6?
When I look at the code you posted in IE6 it looks pretty good except as mentioned that the radio inputs have borders on them.
Is there another issue that I'm missing?
Bookmarks