Solved

IE bug with position:absolute

Posted on 2007-04-05
7
3,246 Views
Last Modified: 2008-01-09
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
0
Comment
Question by:opho
  • 3
  • 3
7 Comments
 
LVL 9

Expert Comment

by:fuzzboxer
ID: 18859203
Could have something to do with you using an unordered list.  Why are you using lists to layout a form?
0
 
LVL 4

Author Comment

by:opho
ID: 18859442
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
 
LVL 30

Expert Comment

by:Steggs
ID: 18867787
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 4

Author Comment

by:opho
ID: 18867995
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
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 18869509
I thought it might be a whitespace issue but no.

How about using floats instead?
0
 
LVL 4

Author Comment

by:opho
ID: 18871635
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
 
LVL 30

Expert Comment

by:Steggs
ID: 18872143
Glad u got it fixed m8 :)
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Button Css BootStrap 2 45
css help with menu spacing 10 45
CSS change width browser switches to mobile view 2 72
Centered Image 2 27
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now