Hoi,
Ik heb weer een probleempje met html/css waar ik niet uit kom.
Ik heb m.b. van css een horizontaal menu gemaakt voor op een webpagina. Ik maak hiervoor een dic met id="top-menu" waar ik een ul in maak.
Zie hier de code met een voorbeeld 'body':
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/*top menu*/
#top-menu {
width: 100%;
background: #000;/*#2797EB;*/
float: left;
}
#top-menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
#top-menu a, #top-menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#top-menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#top-menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#top-menu a:hover {
color: #a00;
background: #fff;
}
#top-menu ul ul {
position: absolute;
z-index: 500;
}
/*menu's niet laten zien */
div#top-menu ul ul {
display: none;
}
div#top-menu ul li:hover ul
{display: block;}
div#top-menu ul ul li {border:none; width:100%; float:left; display:inline;}
</style>
</head>
<body>
<div id="top-menu">
<ul>
<li><h2>Navigation</h2>
<ul><li><a href="/" title="Home">Home</a></li>
<li><a href="index.htm" title="Index">SubIndex</a></li>
</ul>
</li>
</ul>
</div>
<table>
<tr><td>Test1</td><td>Test2</tf>
</table>
</body>
</html>
Bovenstaande code maakt dus het menu in een balk die pagina breed is en zet er een tabel zonder borders onder.
Deze code werkt prima in IE en in Chrome/Chromium. Nu het probleem:
Als ik dit in FF inlaad wordt de tabel dat naast het menu neergezet, dus de zwarte balk wordt 100% van de breedte en dan wordt buiten beeld de tabel gemaakt en krijg je een horizontale scrolbar. Bij IE en Chrome komt hij er wel keurig onder te staan. Als ik voor de tabel nog wat tekst zet dan heb ik het probleem in FF niet en wordt het geheel (tekst+tabel) keurig onder het menu geplaatst.
Weet iemand wat ik hier fout doe en vooral hoe ik het op kan lossen zodat deze pagina in alle 3 browsers even goed werkt?
