Welcome to WebmasterWorld Guest from 54.158.25.146

Forum Moderators: not2easy

Message Too Old, No Replies

abs:pos element positioning to parents padding

in IE, of course

     
4:54 pm on Jan 19, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts:1240
votes: 0


I have a setup of nested lists, that ive styled to to appear as a set of tabs, with a the nested list appearing as a submenu underneath.

The parent list has position:relative; so i can use position:absolute; on the nested list to put it correctly underneath.

Im wanting the sub list to be positioned exactly one pixel from the left of the parent list container, but in IE its positioning it exactly one pixel to the left of the padding on the list. Op + FF are behaving as expected.

Any thoughts?

HTML4 strict full DTD

Cheers
Ben

9:03 pm on Jan 19, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5003
votes: 20


You could try using a conditional comment to include a stylesheet hack for IE. In other words, define your style as you have (for Firefox, Op, etc.), and then wrap your IE style in conditional comments.

As for the fix, adjust the top/left (or whatever you're using to specify the location of the absolutely positioned element) to compensate for the padding of the containing element. For example, if your containing element has a padding of 10px, then adjust the top/left to be -10px.

I haven't verified that will work, but I think it should. You may also need to adjust the z-index to make sure your absolutely positioned element is on top.

9:01 am on Jan 20, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts:1240
votes: 0


Hi Fotiman,

I had considered C comments and the negative position fix, but was wondering if anyone knew of the reason for this strange problem, as its one i havent come across before.

If possible id like to stay as hack/workaround free as possible, but thats looking increasingly unlikely :(

3:23 pm on Jan 20, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5003
votes: 20


So I'm assuming this may look something like this:


<ul>
<li><a href="#">Tab 1</a>
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
</ul>

If you apply padding to the top level Tab 1, then I think it makes sense that everything contained within that list is going to be within that padding.

Therefore, maybe you should remove the padding from the <li> and instead apply it to <a>? Or you could wrap "Tab 1" in a span and apply it to that. Just an idea.

3:59 pm on Jan 20, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


Im wanting the sub list to be positioned exactly one pixel from the left of the parent list container, but in IE its positioning it exactly one pixel to the left of the padding on the list. Op + FF are behaving as expected.

This may have something to do with how different browsers handle clearing marker-box space for lists. Moz uses padding, IE uses margin. So depending on how you've handled those two properties on the list elements, this could be the source of the discrepancy.

For instance, if you've set a padding but not a margin (and the margin hasn't been zeroed out), then IE is going to add it's default list margin (the marker box) into the mix while FF won't (the explicit padding will override FF's default padding used for marker-box space).

If you haven't already, I would check that you've negated all default margin and padding on the lists, then explicitly set one or the other and see how it looks.

cEM

4:09 pm on Jan 20, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


Are you sure you're not in quirks mode? Are you using a doctype?
4:26 pm on Jan 20, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts:1240
votes: 0


er yeah im pretty sure im not in quirks. Hence

HTML4 strict full DTD

in my original post.

Fotiman - thats exactly like the code. The padding is on the a: not the li

CEM - the margin and padding are zeroed on everything at the start of the CSS :(