0
Voici une page de test complète sur laquelle je travaille (je me rends compte qu'elle est encore laide et encombrée). Mon problème est avec ul class = "dropdown". J'ai l'intention d'être un remplacement pour un SELECT afin que je puisse le styler (encore une fois, pas encore fait). Cependant, je n'arrive pas à le positionner où je le veux. Si vous regardez cette page dans FF3.5, c'est ainsi que je veux qu'elle soit positionnée. Cependant, dans IE7, il pousse l'UL sur la ligne suivante au lieu de se heurter à l'étiquette. J'ai essayé de nombreux hacks que j'ai trouvés en ligne et aucun ne semble aider. Qu'est-ce que j'oublie ici?L'élément UL en ligne ne fonctionne pas dans IE7
<!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>
Oui, j'ai déplacé et enlevé les entrées cachées mais cela ne semble rien changer. – heath