IE bug with position:absolute

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.html

Thanks!

--Steve
LVL 4
ophoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

fuzzboxerCommented:
Could have something to do with you using an unordered list.  Why are you using lists to layout a form?
0
ophoAuthor Commented:
Hey fuzzboxer...

I use an unordered list because my forms are requests for lists of information.

The forms tend to degrade nicely for folks using adaptive technologies, or for those browsers ignore CSS.

If you've got specific experience with IE rendering absolutely positioned items differently inside an unordered list than it renders them inside other elements, I'd love to hear about it.

--Steve
0
Mark StegglesWeb DeveloperCommented:
Hi Steve,

Why are you using absolute positioning? Is it because you want the text before the checkbox when css is turned off?

Cheers
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ophoAuthor Commented:
Hey Steggs...

With text (or textarea) input fields, I just want the label text to appear first in the source, and be positioned visually on the left, and place additional instructions (when needed) and the input fields on the right.

With checkboxes, I want to reverse that, having the checkbox first, on the left, and its label on the right.

I'm open to suggestion as to how best to make that work.

--Steve
0
Mark StegglesWeb DeveloperCommented:
I thought it might be a whitespace issue but no.

How about using floats instead?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ophoAuthor Commented:
OK, so styling my label this way:

margin-left: -165px;
width:155px;
text-align:right;
float:left;

produced the same effect as my absolute positioning previously, but the problem remained that, in IE only, the text embedded in <p></p> was positioned lower than the label.  Applying this:

p {
float:left
}

fixed the vertical spacing problem, even though there was nothing it needed to float around.

My guess, after poking around a bit, is that I was seeing the IE list item white space bug.

Thanks, Steggs.... that was just the tip I needed!

0
Mark StegglesWeb DeveloperCommented:
Glad u got it fixed m8 :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.