html - Position:Absolute withing Position:Relative in Chrome -


I made a major mistake in not debugging on all browsers while designing my site. Form elements in Firefox (3.6.10) and IE8 appear fine, but in Chrome (10), only the status: Full elements are displayed.

I have a form created from an unordered list that have been installed with list item status: relative.

HTML:

  & lt; Form & gt; This is a left floating label, right floating field and, possibly, a position: full widget. & Lt; Ul & gt; & Lt; Li & gt; & Lt; Label & gt; Name & lt; / Labels & gt; & Lt; Input type = "text" / & gt; & Lt; An id = "name generator" class = "widget" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Form & gt;   

CSS:

took the form (margin: 5 px; Clean both; Status: Relative; } Form label {float: left; Margin-top: 0 pixels; Margin-down: 0 pixels; } Input {float: true; Margin-top: 0 pixels; Margin-down: 0 pixels; } Form. Vidette {status: complete; Top: 0; Correct: 0; Z-index: 99; }

I can "fix" this situation by removing: Relative but it is unacceptable. Can I do anything to create the desired result?

Add it to your CSS:

  form ul li {overflow : Auto; }   



Comments