I have made the cardinal mistake of not debugging on ALL browsers while designing my site. In Firefox (3.6.10) and IE8 the form elements show up fine but in chrome(10), only the position:absolute elements show up.
I have a form made from an unordered list. The list items are set up with position:relative. it contains a left floating label, right floating field and, potentially, an position:absolute widget.
HTML:
<form><ul>
<li>
<label>Name</label>
<input type="text" />
<a id="nameGenerator" class="widget"></a>
</li>
</ul></form>
CSS:
form ul li{
margin: 5px;
clear: both;
position:relative;
}
form label{
float:left;
margin-top: 0px;
margin-bottom: 0px;
}
form input{
float:right;
margin-top: 0px;
margin-bottom: 0px;
}
form .widget{
position: absolute;
top: 0;
right: 0;
z-index: 99;
}
I can "fix" this by removing the position:relative but that is unacceptable. Is there anything I can do to produce the desired results?
position
is generallystatic
.static