468,458 Members | 1,813 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,458 developers. It's quick & easy.

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

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
6 5808
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
Mike Scirocco wrote:
>
<span class="here">Chapter 2
<ul>
FYI, that's invalid. <spancan only contain other inline elements.

--
Berg
May 29 '07 #3
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
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>
<!--[if lt IE 7]>
<style type="text/css">

/* fix gaps for IE 6- by giving elements "hasLayout" property */
#navigation ul,
#navigation li,
#navigation a,
#navigation span {
height:1px;
}

</style>
<![endif]-->
</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
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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Peter Valdemar M?rch | last post: by
4 posts views Thread by Peter Pfannenschmid | last post: by
4 posts views Thread by KiwiBrian | last post: by
8 posts views Thread by lufublico | last post: by
reply views Thread by Pablito | last post: by
reply views Thread by kmladenovski | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.