Drop down menu (met name IE probleempje)

Iris17 · 26 jan 2011

hoi,

kunnen jullie me alsjeblieft helpen? Ik heb een horizontale drop down menu gemaakt. Op de Mac werkt ie aardig (dient nog finetuning) maar in IE is het een drama.
Ik heb al een aantal tutorials opgezocht, codering proberen te plakken, maar het blijft een zootje. Kan iemand me alsjeblieft helpen door de juiste codering aan te geven en waar ik die dan moet plaatsen?
Alle commentaar is welkom om de site te verbeteren!

bij voorbaat dank!

Iris

Mijn index.html ziet er nu zo uit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
<link href="file:linda/website/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="index.html.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
<div id="header">
<img src="Images/loop.gif" width="415" height="150" alt="loop" />
<div id="contentcontainer">
<div id="container">

<div id="wrapper">
<div id="nav-container">

<ul>

<li><a href="index.html" title="Home">Home</a></li>

<li class="active"><a href="Overnachten.html" title="Overnachten">Overnachten</a>
<ul>
<li><a href="Kamers.html" title="Kamers">Kamers</a></li>
<li><a href="Prijzen en reserveren.html" title="Prijzen en reserveren">Prijzen en reserveren</a></li>
</ul>

<li class="active"><a href="Horeca.html" title="Horeca">Horeca</a>
<ul>
<li><a href="Restaurant.html" title="Restaurant">Restaurant</a></li>
<li><a href="Grand cafe.html" title="Grand cafe">Grand Cafe</a></li>
<li><a href="Vergaderen.html" title="Vergaderen">Vergaderen</a></li>
</ul>

<li class="active"><a href="Faciliteiten.html" title="Faciliteiten">Faciliteiten</a>
<ul>
<li><a href="Zwembad.html" title="Zwembad">Zwembad</a></li>
<li><a href="Golfbaan.html" title="Golfbaan">Golfbaan</a></li>
<li><a href="Tennisbaan.html" title="Tennisbaan">Tennisbaan</a></li>
</ul>

<li class="active"><a href="Uit in xxxx.html" title="Uit in xxxxx">Uit in xxxxxx</a>
<ul>
<li><a href="Sportief.html" title="Sportief">Sportief</a></li>
<li><a href="Cultureel.html" title="Cultureel">Cultureel</a></li>
<li><a href="Wellness.html" title="Wellness">Wellness</a></li>
<li><a href="Winkelen.html" title="Winkelen">Winkelen</a></li>
<li><a href="Eten en drinken.html" title="Eten en drinken">Eten en drinken</a></li>
<li><a href="Bezienswaardig.html" title="Bezienswaardig">Bezienswaardig</a></li>
<li><a href="In business" title="In business">In business</a></li>
</ul>

<li><a href="Reserveren.html" title="Reserveren">Reserveren</a></li>
<li><a href="Contact.html" title="Contact">Contact</a></li>
</ul>
</div>
</div>

</div>
<div id="middenkolom">
<h1>Parkhotel xxxxxx</h1>
<p>Dit is de website van Parkhotel xxxxxxx.

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</p>
</div>

<div id="rechterkolom">
<p> <img src="Images/groninger museum.jpg" alt="museum" width="164" height="116" border= "2px color: # ccc" align="middle" position= "centre"/></p>
<p> </p>
<p><img src="Images/schepen-op-het-wad.jpg" alt="schepen op het wad" width="164" height="123" border= "2px color: # ccc" align="middle" position= "centre"/></p>
<p> </p>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Borgen','','Images/nienoord-leek.jpg',1)"><img src="Images/freylemaborg.jpg" alt="borgen" name="Borgen" width="164" height="109" border="0" id="Borgen" /></a>
<p> </p>
<p> </p>
<p> </p>

<b>Onze gegevens:</b>

<p>xxxxx<br />

xxxxxxx<br />

tel. xxxxxx<br />

<a href="mailto:info@xxxxx.nl">info@xxxxx.nl</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
© xxxxx
</div>
</div>
</body>
</html>

en mij css:

body {
font-family: Tahoma, Geneva, sans-serif ;
font-size: 16px;
color: #E6E6E6;
background-image: url(Images/kleur-container.png);
background-position: top;
background-repeat: repeat;
background-attachement: scroll;

}

h1 {
font-size: 26px;
font-style:italic;
color: #F93;
margin-top: 0px;
padding-left: 3px;
}

a {
color: #DDD;
}

a:hover {
text-decoration: none;
}

div#header {
width: 940px;
margin: 0 auto;
height: 155px;
background-image: url(Images/header200111.png);
align: right;
margin-bottom: 10px;

}

div#contentcontainer {
background-image: url(Images/beige-container2.png);
marging-bottom: 5px;
margin-top: 10px;

}

div#container {
width: 940px;
margin: 0 auto;
padding: 2px;

}

standaard verticaal menu zonder uitklap!

div#linkerkolom ul li ul {
font-size: 0.8em;
margin-left: 25px;
}
div#linkerkolom ul li ul li {
margin-bottom: 1px;
}
div#linkerkolom ul li ul li a {
background: #ddd;
}
------------------------------

div#linkerkolom ul li ul {
position: absolute;
left: 210px;
top: 0px;
width: 100px;
display: none;
}
div#linkerkolom ul li:hover ul {
display: block;
}

*/

#nav-container {
width: 940px;
height: 50px;
position: auto;
padding-left: 2px;
padding-bottom: 1px;
border: none;
}

#nav-container ul {
list-style: none
}

#nav-container ul li {
float: left;
position: left;
padding-bottom: 2px;
padding-left: 18px;
padding-right: 18px;
margin-left: 0px;
position: relative;
z-index: 5;

}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;

}

#nav-container ul li a {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
padding-top: 1px;
padding-left: 16x;
padding-right: 6px;
padding-bottom: 2px;
display: block;
color: #633;
text-decoration: none;
text-align: left;
}

#nav-container ul li a:hover {
background-color: #C60;
color:#FFF;

}

#nav-container ul ul {
display: none;
float: inherit;
top: 30px;
position: absolute;
padding-left: 3px;

}

#nav-container ul li:hover ul {
display: block;
position: absolute;
}

#nav-container ul li ul li {
border-bottom: none;
}

#nav-container ul li ul li a,
#nav-container ul li.active ul li a {
width: 120px;
background: #960;
color: #FFF;
padding-left: 4px;
font-size: 14px;
color: #FFC;
}

div#middenkolom {
width: 680px;
padding: 30px;
float: left;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
background-image: url(Images/beige-container2.png);
color: #630;
font-size: 17px;
}

div#middenkolom div#kruimelpad {
font-size: 0.8em;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 10px;
background: 0;
}

div#rechterkolom {
width: 160px;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 5px;
padding-right: 25px;
padding-top: 42px;
background-image: url(Images/beige-container.png);
opacity: 0.75;
float: right;
color: #EEE;
font-style: bold;
font-size:12px;
}

div#footer {
font-size: 14px;
background-image: url(Images/beige-container.png);
height: 25px;
clear: both;
}

Westsidemg · 26 jan 2011

Ten eerste gebruikt [.CODE][/.CODE] Tags, maakt het wat overzichtelijker.
Ten tweede waarom gebruik je niet :

Code:

<select>
<option>Optie1</option>
<option>Optie2</option>
</select>

Drop down menu (met name IE probleempje)

Iris17

Gebruiker

Westsidemg

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy