Ниже приводится целая тестовая страница, над которой я работаю (я понимаю, что она все еще безобразна и загромождена). Моя проблема связана с ul class = "dropdown". Я намерен заменить его на SELECT, чтобы я мог его стилизовать (опять же, еще не сделано). Однако я не могу расположить его там, где я хочу. Если вы посмотрите на эту страницу в FF3.5, я хочу, чтобы она была расположена. Однако в IE7 он выдвигает UL на следующую строку, а не сталкивается с меткой. Я пробовал множество взломов, которые я нашел в Интернете, и ни один из них, похоже, не помог. Что мне здесь не хватает?
<!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>
<title>Radix Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:1em;
font-family:arial,sans-serif;
}
.user-form li
{
background: #fff none no-repeat bottom right;
border: 1px solid #000;
margin: 0;
padding-right: 35px;
text-align: right;
}
.user-form li label
{
background: #fff;
border: 1px solid #333;
display: -moz-inline-stack; /* Support below FF3 */
display: inline-block; /* Used only to set width */
padding: 1px 0;
width: 10em;
}
.dropdown
{
border: 1px solid #f00;
width: 20em;
padding: 0;
margin: 0;
display:inline-block;
}
.dropdown ,
.dropdown ul
{
list-style-type:none;
}
.dropdown li
{
text-align: left;
}
</style>
</head>
<body>
<form id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" class="edit-on" action="/service/testclass.php">
<fieldset>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:id" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" type="hidden"/>
<ul class="user-form">
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">Prefix:</label>
<input value="Ms." id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix" name="name_prefix" type="hidden"/>
<ul class="dropdown">
<li>
<a href="#" class="trigger">Miss</a>
</li>
<li class="dropcontainer">
<ul class="dropdownhidden">
<li>
<a href="#"> </a>
</li>
<li>
<a href="#">Mister</a>
</li>
<li>
<a href="#">Misses</a>
</li>
<li>
<a href="#">Miss</a>
</li>
<li>
<a href="#">Doctor</a>
</li>
<li>
<a href="#">This is just a little test to see exactly how long this silly thing will make my option</a>
</li>
</ul>
</li>
</ul>
<input name="name_prefix_value" value="Mr." type="hidden"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name">Customer Last Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name" name="last_name" value="Jones" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name">My First Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name" name="first_name" value="George" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name">Middle Name:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name" name="middle_name" type="text"/>
</li>
<li class="valid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix">Suffix:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix" name="name_suffix">
<option value="0"/>
<option value="Jr.">Junior</option>
<option value="Sr.">Senior</option>
</select>
<input name="name_suffix_value" type="hidden"/>
</li>
<li class="invalid">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date">Date of Birth:</label>
<input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date" name="birth_date" type="text"/>
</li>
<li class="warning">
<label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender">Gender:</label>
<select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender" name="gender">
<option value="0"/>
<option value="U">Unknown</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<input name="gender_value" type="hidden"/>
</li>
</ul>
<div class="form-actionbar">
<input name="form-edit" value="Edit" class="button-view" type="submit" disabled="disabled"/>
<input name="form-draft" value="Draft" class="button-edit" type="submit"/>
<input name="form-submit" value="Submit" class="button-edit" type="submit"/>
<input name="form-cancel" value="CancelMe" class="button-edit" type="submit"/>
<input name="form-suspend" value="Suspend" class="button" type="submit"/>
</div>
</fieldset>
</form>
</body>
</html>