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

Markus

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_...e_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

May 29 '07 #1

Follow Post Reply

5895

Mike Scirocco

Markus wrote:

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_...e_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

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>

May 29 '07 #2

Bergamot

Mike Scirocco wrote:

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

FYI, that's invalid. <spancan only contain other inline elements.

--
Berg

May 29 '07 #3

BootNic

Markus <derernst@NO#SP#AMgmx.chwrote:

news: 46**********@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;
}

--
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*

May 30 '07 #4

Mike Scirocco

Bergamot wrote:

Mike Scirocco wrote:
> <span class="here">Chapter 2
<ul>

FYI, that's invalid. <spancan 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>

May 30 '07 #5

Markus

BootNic schrieb:

>Markus <derernst@NO#SP#AMgmx.chwrote:
news: 46**********@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;
}

That's it, thank you!

May 30 '07 #6

Markus

Mike Scirocco schrieb:

Bergamot wrote:
>Mike Scirocco wrote:
>> <span class="here">Chapter 2
<ul>

FYI, that's invalid. <spancan only contain other inline elements.

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

[code snipped]

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

The problem here is that the <spanelement can also be an <aelement,
so replacing it by a <divis 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.

May 30 '07 #7

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

This discussion thread is closed

Similar topics