PDA

Click to See Complete Forum and Search --> : Image below a list behaves different in IE and FF

lasheimok
12-16-2008, 12:55 AM
Hi all,

any idea about why IE and FF treat the following code differently?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>example</title>
<style type="text/css">
.menu-nav a span {
background-color: yellow;
}

.menu-nav ul {
height: 0px;
}
</style>

</head>
<body>

<ul class="menu-nav">
<li>
menu
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>

<img src="imagineAnImageHere.png" alt="some image" style="height:200px;">
</body>
</html>

FF and most other browsers put the image behind the list, while IE and Opera put the image below the list.

Can anyone explain me the difference, and how to make IE behave the FF does? :confused:


Gratefully,
Lasheimok
Fang
12-16-2008, 02:22 AM
Below in all browsers.
why height:0px; for your list? It makes no sense.
lasheimok
12-16-2008, 02:37 AM
Hi Fang,

thanx for asking.

The code is a stripped down sample of an animated drop down menu. I thought the code is easier to read if I just post the part that doesn't work.

The height property is necessary for the menu to work, and triggers the right behavior in FF, but not in IE.


Gratefully,
Lasheimok
Fang
12-16-2008, 02:45 AM
Can't see the problem without see the complete code.

Setting the menu height to zero indicates a necessity to use JavaScript for the menu, thus an accessibility issue.