I do a lot of form building. My standard is to style labels in the left margin, right-justified, and entry fields in the body. The technique that is getting me closest is to what I need is a left margin of 165px, and labels styled with "position:absolute; top:0; left:-165px; width:155px;".
That approach works passably in IE and Firefox until I want to put text embedded in <p></p> tags immediately after the label. Then, IE seems to stop respecting the position:absolute on the label, and positions the <p>paragraph text</p> lower than the label.
I have a comparable issue with checkboxes. With checkboxes, I invert the layout, posititioning the checkbox absolutely in the right margin, and the label on the right. If the label is styled as "display:block", IE seems to quit respecting the position:absolute on the checkbox and drops the label text underneath the label. Reverting to "display:inline" for the label fixes the vertical position, but there are times that I need to be in display:block mode.
My question: Which IE bug am I hitting? I've been looking for documentation and articles on this for a couple hours now, but am not coming up with anything. I'm trying to get my arms around the limitations of absolute positioning in this context as well as possible workarounds.
See a demo of what I'm describing here:
http://www.myorghost.net/temp/contact3.htmlThanks!
--Steve
Start Free Trial
