Forum Moderators: not2easy
I'm having a problem getting a CSS form to work. I'm using a pattern that I always use: set a label to fixed-width so the fields line up, then float the labels so that their fields lie next to them. It works fine in FF, but in both IE6 and 7, the select tag wraps to the next line, even though it appears that there's more than enough room for it. The only way I can get it to align correctly is to set the width of the form to something far too big, like 500px.
Here's the code, stripped down to the essentials. It's completely valid, works in FF2 and doesn't in IE6. Any ideas?
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
}
#map form {
width: 280px;
float: left;
border: 1px dashed red;
}
#map div.input_set {
border: 1px dashed blue;
clear: both;
float: left;
}
#map select {
width: 121px;
}
#map label {
font-weight: bold;
display: block;
width: 85px;
text-align: right;
float: left;
}
</style>
</head>
<body>
<div id="map">
<form action="/search" method="get">
<h3>SEARCH NEARBY</h3>
<div class="input_set">
<label for="q">Search For:</label><input type="text" size='20' name="q" id="q" value="" />
</div>
<div class="input_set">
<label for="proxDistance">Within:</label><select name="proxDistance" id="proxDistance">
<option value="">(any)</option>
<option selected="selected" value="3218.688">2.0 miles</option>
</select>
<input type="submit" name="go" value="GO" />
</div>
</form>
</div>
</body>
</html>
So any idea *why* it renders differently in IE than FF?
If this fix does cause you problems you could try this...
Create a button class:
<style>
.button{margin:0;padding:0 .25em;width:auto;overflow:visible;}
</style>
<!--[if IE]>
<style>.button{width:1;}</style>
<![endif]-->
