Forum Moderators: not2easy
<a href=”firsturl”>first link<a href=”secondurl”>secondlink</a></a>
This seems to work and even (sometimes) works with lists so I thought I’d try seeing if it could be modified to form a CSS menu in IE.
It didn’t work out but in the process I found several other browser CSS problems. One is the failure of the browsers (both IE and Netscape) to support {display:inline} for <div> under certain circumstances.
Since both browsers display the same results I’m wondering if I’m missing something or is this really a bug? If I remove the unordered lists in each <div> in the test cases then the <div> displays inline as I expect but with the lists it doesn’t work. I’ve enclosed a simplified example of my test cases and removed the nested anchors so that the problem is entirely with the <div>. Any ideas on why this works this way or any comments will be welcome.
Problems with inline <div> code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Block Test</title>
<style type="text/css">
<!--
.nav {
display : inline;
position: relative;
padding: 0;
border: 0;
}
.menu {
background-color: lime;
padding: 0;
border: 0;
left: 0;
}
.menu:hover {
background-color: aqua;
}
.mymenu {
list-style-type:none;
padding: 0;
border : 0;
left : 0;
}
.menuitem {
padding: 0;
border: 0;
background-color: red;
}
.menuitem:hover {
background-color : silver;
}
-->
</style>
</head>
<body>
<h2>Div's don't display inline</h2>
<div class="nav">
<a href="#" class="menu">MENU1</a>
<ul class="mymenu">
<li><a href="#" class="menuitem">ITEM11</a></li>
<li><a href="#" class="menuitem">ITEM12</a></li>
<li><a href="#" class="menuitem">ITEM13</a></li>
</ul>
</div>
<div class="nav">
<a href="#" class="menu">MENU2</a>
<ul class="mymenu">
<li><a href="#" class="menuitem">ITEM21</a></li>
<li><a href="#" class="menuitem">ITEM22</a></li>
<li><a href="#" class="menuitem">ITEM23</a></li>
</ul>
</div>
<div class="nav">
<a href="#" class="menu">MENU3</a>
<ul class="mymenu">
<li><a href="#" class="menuitem">ITEM31</a></li>
<li><a href="#" class="menuitem">ITEM32</a></li>
<li><a href="#" class="menuitem">ITEM33</a></li>
</ul>
</div>
</body>
</html>
As for nesting anchors..:
[w3.org...]
