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

Subscribe Post Reply

6038

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

by: Peter Valdemar M?rch | last post by:

Hi, I'm having some trouble with IE6 and position: absolute. Try selecting some text from this page! (Macromedia template) http://morch.com/m2/prof/prof.htm Greatly simplified example:...

HTML / CSS

No browser supports CSS2 / position:absolute?

by: Peter Pfannenschmid | last post by:

Hello experts, I would be very grateful if you would have a look at the following URL: http://www.omeganet.de/test.html The html file and the associated style have been validated...

HTML / CSS

Position absolute plus float

by: KiwiBrian | last post by:

What would be the behaviour and characteristics of a div that was both positioned absolute, and floated? Are they contradictory or complementary regarding how the div is perceived by other...

HTML / CSS

ie6 absolute top issue

by: lufublico | last post by:

Hello everyone, i'm having the following problem. Considering the next portion of stylesheet: html { background-color: black; height: 100%; overflow: auto; }

HTML / CSS

Answering position:absolute query once and for all

by: Laphan | last post by:

Hi All I have developed a site whereby it uses the contents of a folder (incs gifs, jpgs and css files) to display the web 'skin' of the site. This is OK, but each button on the site is an...

HTML / CSS

Crossbrowser position:absolute

by: Pablito | last post by:

Hi at all, I have a little problem about position:absolute. I want to position absolutely a menu bar. if I write: menubar {position: absolute;top:5.2em;} with MSIE the menu bar is too height on...

HTML / CSS

position:absolute in a relative container bug

by: derelicten | last post by:

hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of...

HTML / CSS

Tableless layout. Is it always divs with position:absolute?

by: ThunderMusic | last post by:

Hi, I think the subject says it all... thanks ThunderMusic

ASP.NET

Posted in wrong group: Position absolute not always removed from flow?

by: Nik Coughlin | last post by:

I just posted a message that I intended to post here in alt.html by mistake. For the sake of avoiding a multipost would appreciate it if anyone who has time could head over to alt.html and help...

HTML / CSS

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

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

Similar topics