Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: [opgelost]html/css horizontaal menu en firefox  (gelezen 1435 keer)

Online MKe

  • Lid
  • Steunpunt: Nee
[opgelost]html/css horizontaal menu en firefox
« Gepost op: 2011/03/29, 14:45:45 »
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?
« Laatst bewerkt op: 2011/03/30, 07:26:26 door MKe »
Mijn blokkendoos blog: http://mke21.wordpress.com/

Offline bram103

  • Lid
  • Steunpunt: Nee
Re: html/css horizontaal menu en firefox
« Reactie #1 Gepost op: 2011/03/29, 19:13:11 »
table {clear:left;} toevoegen aan je style.

Gr,
Bram

Online MKe

  • Lid
  • Steunpunt: Nee
Re: html/css horizontaal menu en firefox
« Reactie #2 Gepost op: 2011/03/30, 07:26:13 »
Geweldig, werkt prima.