IE6: Element with position:absolute leaves gap in element flow

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Markus - 29 May 2007 16:28 GMT

Hello

I have a navigation structured as follows:

<ul>
<li>
<a>Chapter1</a>
<ul>
<li><a>Chapter 1.1</a></li>
<li><a>Chapter 1.2</a></li>
</ul>
</li>
<li>
<a>Chapter1</a>
</li>
</ul>

The related parts of the stylesheet say:

ul li { position:relative; }
ul li ul { position:absolute; }

So the inner ul element is removed from the element flow. Anyway IE6 and
lower has lots of problems with that. Following this article:
http://www.satzansatz.de/cssd/onhavinglayout.html
I was able to remove most of the gaps using a fix stylesheet. Anyway a 5
pixel gap remains at the place of the inner ul element.

Here is my test case:
http://www.markusernst.ch/stuff_for_the_world/ie_gaptest.html

It validates and it works in Firefox, Safari and also IE7. I am actually
surprised that I am not able to find anything on this by googling, as it
does not seem to be a very special task.

If anybody knows a solution or a workaround I will be happy to get
pointed to it!

Thanks
Markus

Reply to this Message

Mike Scirocco - 29 May 2007 21:28 GMT

> Hello
>
[quoted text clipped - 36 lines]
> Thanks
> Markus

How about this:

<div id="navigation">
<ul>
<li><a href="#">Chapter 1</a></li>
<li>
<span class="here">Chapter 2
<ul>
<li><span class="here">Chapter 2.3.1</span></li>
<li><a href="#">Chapter 2.3.2</a></li>
</ul>
</span>
</li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
</ul>
</div>

Reply to this Message

Bergamot - 29 May 2007 22:20 GMT

> <span class="here">Chapter 2
> <ul>

FYI, that's invalid. <span> can only contain other inline elements.

Signature

Berg

Reply to this Message

Mike Scirocco - 30 May 2007 08:07 GMT

>> <span class="here">Chapter 2
>> <ul>
>
> FYI, that's invalid. <span> can only contain other inline elements.

drat! ... this works in my IE6, FF2, didn't check IE7 maybe someone here
can:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test for IE gaps</title>
<style type="text/css">
body:{
margin: 0;
padding: 10px;
}
#navigation {
width:12em;
}
#navigation ul {
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
margin:0;
padding:0;
}
#navigation a,
#navigation span {
display:block;
}
/* Level 1 */
#navigation ul li a,
#navigation ul li span {
padding:0.2em 0.2em 0.2em 1em;
background-color:#cccccc;
}
.here{
background-color:#999999;
padding:0.2em 0.2em 0.2em 1em;

}
#navigation ul li a:hover,
#navigation ul li a:focus,
#navigation ul li a:active{
background-color:#999999;
}

/* Level 2 positioned absolute */
#navigation ul li {
position:relative;
}
#navigation ul li ul {
position:absolute;
top:0;
left:12em;
width:12em;
z-index:6;
display:block;
}
#navigation ul li ul li a, #navigation ul li ul li span {
background-color:#ffff00;
}
#navigation ul li ul li a:hover, #navigation ul li ul li a:focus,
#navigation ul li ul li a:active, #navigation ul li ul li a.here,
#navigation ul li ul li span.here {
background-color:#cccc00;
}
</style>

</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">Chapter 1</a></li>
<li>
<div class='here'>
Chapter 2
<ul>
<li><span class="here">Chapter 2.3.1</span></li>
<li><a href="#">Chapter 2.3.2</a></li>
</ul>
</div>
</li>
<li><a href="#">Chapter 3</a></li>
<li><a href="#">Chapter 4</a></li>
</ul>
</div>
</body>
</html>

Reply to this Message

Markus - 30 May 2007 10:15 GMT

Mike Scirocco schrieb:

>>> <span class="here">Chapter 2
>>> <ul>
[quoted text clipped - 3 lines]
> drat! ... this works in my IE6, FF2, didn't check IE7 maybe someone here
> can:

[code snipped]

> <li>
> <div class='here'>
[quoted text clipped - 5 lines]
> </div>
> </li>

The problem here is that the <span> element can also be an <a> element,
so replacing it by a <div> is only applicable for the menu point of the
page shown. I see that this was not made clear in my example.

Your suggestion also shows that HTML specs in some points are in
conflict with things that would be desirable in combination with CSS:

<li>
<a href="chapter-2.html">Chapter 2
<ul>
<li><a href="chapter-21.html">Chapter 2.1</a></li>
<li><a a href="chapter-22.html">Chapter 2.2</a></li>
</ul>
</a>
</li>

This is not valid, though it would make mouseover effects much easier
without the need of scripting:

a ul {
display:none;
}
a:hover ul, a:focus ul, a:active ul {
display:block;
}

I don't actually know whether li:hover would be valid; it would not be
widely supported anyway.

Reply to this Message

BootNic - 30 May 2007 03:33 GMT

> Markus <derernst@NO#SP#AMgmx.ch> wrote:
> news: 465c3ec2$1_2@news.cybercity.ch

[snip]

> I was able to remove most of the gaps using a fix stylesheet. Anyway
> a 5 pixel gap remains at the place of the inner ul element.

[snip]

> If anybody knows a solution or a workaround I will be happy to get
> pointed to it!

li {
vertical-align : middle;
}

Signature

BootNic Tuesday, May 29, 2007 10:33 PM

"The POP3 server service depends on the SMTP server service, which
failed to start because of the following error: The operation
completed successfully."
*Windows NT Server v3.51*

Reply to this Message

Markus - 30 May 2007 09:58 GMT

BootNic schrieb:

>> Markus <derernst@NO#SP#AMgmx.ch> wrote:
>> news: 465c3ec2$1_2@news.cybercity.ch
[quoted text clipped - 7 lines]
> li { vertical-align : middle;
> }

That's it, thank you!

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

IE6: Element with position:absolute leaves gap in element flow