Forum Moderators: not2easy
I've come up against an issue with IE and its inability to be like firefox. Anyhow. I have a <ul> that is being used to display a form. It has 2 nested <uls> which are floating to the left as to display on a single line. I also have some <li> elements with an #label which you can see below. Everything is just dandy in Firefox, but in IE each <li> seems to have an extra bit of whitespace. I've been googling around and can't find anything to fix the issue, so here I am with my cup out. Plz Help!
ul#form-ul{
width:75%;
margin:0 0 0 20px;
}
#label {
font-size:small;
height:10px;
margin:0 0 2px 0;
}
ul#form-ul li input, ul#form-ul-inline li input {
width:90%;
height:20px;
border:1px solid #000;
}
ul#form-ul-inline {
width:140px;
float:left;
}ul#form-ul-inline-2 {
float:left;
margin:1px 0 0 5px;
width:25%;
}
ul#form-ul-inline-2 li select {
width:90%;
height:22px;
border:1px solid #000;
}
<ul id="form-ul">
<li id="label">First Name</li>
<li><input type='text' name='Contact0FirstName' /></li>
<li id="label">Last Name</li>
<li><input type='text' name='Contact0LastName' /></li>
<li id="label">Email</li>
<li><input type='text' name='Contact0Email' /></li>
<li id="label">Phone Number</li>
<li><input type='text' name="Custom-Phone1" id="phone" /></li>
<li>
<ul id="form-ul-inline">
<li id="label">City</li>
<li><input type='text' name='Contact0City' /></li>
</ul>
</li>
<li>
<ul id="form-ul-inline-2">
<li id="label">State</li>
<li><select name='Contact0State' id="state" />
<option value="AK" selected="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select></li>
</ul></li>
</form>
</ul>
Thanks!
* {
margin:0;
padding:0;
}
body {
background:url(../images/bkg.png) repeat 0 0 #496a74;
font-family:"Century Gothic",sans-serif;
}a {}
a:hover {}
a:visited {}
li { list-style:none; }
I un-nested the two nested <ul>s then did this
ul#form-ul li{
display:inline;
float:left;
clear:left
}
Then I just did some relative positioning to push the other 2 <ul>s up a tad and fixed some margins.
Power to da googly!
