narcan
08-21-2006, 04:04 AM
Anyone know anything about this strange behaviour with unordered lists and absolute positioning.
Say I have a un ordered list inside the li of another unordered list that I was absolutley positioned.
It seems saying position: absolute has the same effect as position: relative.
This is the example:
list1 and list2 should be sitting on top of each other, as they are both absolutely positioned to the same position on the left. But when viewing the output you see list2 100pixels to the left of list1. Any ideas on how to fix this behaviour ? Seen on both firefox and ie..
<HTML>
<HEAD>
<style>
UL { border: 1px solid silver; background-color: #e3e3e3; margin:0px; padding: 0px;}
LI { list-style: none; margin:0px; padding: 0px; }
.list1 { position: absolute; left: 100px; top: 10px;}
.list2 { position: absolute; left: 100px; top: 20px; }
</style>
</HEAD>
<BODY>
<ul class="list1">
<li>Test
<ul class="list2"><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</BODY>
</HTML>
Say I have a un ordered list inside the li of another unordered list that I was absolutley positioned.
It seems saying position: absolute has the same effect as position: relative.
This is the example:
list1 and list2 should be sitting on top of each other, as they are both absolutely positioned to the same position on the left. But when viewing the output you see list2 100pixels to the left of list1. Any ideas on how to fix this behaviour ? Seen on both firefox and ie..
<HTML>
<HEAD>
<style>
UL { border: 1px solid silver; background-color: #e3e3e3; margin:0px; padding: 0px;}
LI { list-style: none; margin:0px; padding: 0px; }
.list1 { position: absolute; left: 100px; top: 10px;}
.list2 { position: absolute; left: 100px; top: 20px; }
</style>
</HEAD>
<BODY>
<ul class="list1">
<li>Test
<ul class="list2"><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</BODY>
</HTML>