sidebar werkt niet in Firefox

Status
Niet open voor verdere reacties.
S

sasvdpasch

Gebruiker
Lid geworden
14 jan 2010
Berichten
72
Hoi, ben erg blij met het resultaat echter werkt mijn site niet in Firefox, wel in Google Chrome, IE7/8, Safari. Weet iemand hoe dit kan? De sidebar werkt dan niet van mijn site, kan niet op geklikt worden. Maar in IE7,8, Safarie n Google Chrome werkt het perfect.

HTML: 
<!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"><!-- InstanceBegin template="/Templates/template bali vakantie villa.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Bali Vakantie Villa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Bali vakantie villa is een grote en zeer luxe 5 sterren vakantie villa die uw droom uit laat komen. U vindt hier alle ingrediënten die nodig zijn voor een perfecte vakantie. Schitterende natuur, vriendelijk personeel, culturele traditie en prachtige stranden."/>
<meta name="keywords" content="bali, vakantie, villa, indonesie, huis, bungalow, bunga, belati, reis, reizen, zon, zonnen, zee, strand, stranden, zwembad, paradijs, surfen, snorkelen, dolfijnen, eiland, rijstvelden, rust, lovina, ***a, ubud"/>
<meta name="robots" content="index,follow"/>
<meta name="language" content="dutch"/>
<meta name="copyright" content="Bali Vakantie Villa - Bunga Melati"/>
<!-- InstanceEndEditable -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="headcontainer">
<div id="container">
<div id="header"><img src="title01.jpg" width="790" height="100" alt="index" /></div>
<div id="navigatie">
<ul>
<a href="index.html"><li id="index"></li></a>
<a href="villa.html"><li id="villa"></li></a>
<a href="fotos.html"><li id="fotos"></li></a>
<a href="faciliteiten.html"><li id="faciliteiten"></li></a>
<a href="omgeving.html"><li id="omgeving"></li></a>
<a href="activiteiten.html"><li id="activiteiten"></li></a>
<a href="prijzen.html"><li id="prijzen"></li></a>
<a href="reserveren.html"><li id="reserveren"></li></a>
<a href="contact.html"><li id="contact"></li></a>
<a href="gastenboek.html"><li id="gastenboek"></li></a>
<a href="links.html"><li id="links"></li></a>
</ul>

</div>
<!-- InstanceBeginEditable name="inhoud" -->
<div id="mainContent"><img src="jop9.jpg" width="602,50" height="207" alt="villa top" /></div>
<div id="mainContent2">
<h1>Reserveren</h1>
<H2>Bent u geinteresseerd in een verblijf in Bali Vakantie Villa, dan kunt u dat via onderstaand formulier kenbaar maken!
Na de ontvangst van uw reservering nemen wij zo spoedig mogelijk contact met u op!</h2>


-----------------------------------------------------

CSS
HTML: 
@charset "utf-8";
/* CSS Document */

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #FFF;
text-align: center;
margin: 0px;
padding: 0px;
background-image: url(bg.png);
background-repeat: repeat;
background-position: center center;
}
#headcontainer {
width: 850px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(bg04.png);
background-position: top;
}

#container {
width: 790px;
text-align: left;
background-image: url(bg.jpg);
background-position: center center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-top-width: 0px;
border-right-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
border-top-color: #cbeefd;
border-right-color: #cbeefd;
border-bottom-color: #cbeefd;
border-left-color: #cbeefd;
}
#header {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-color: #CEEFFF;
border-right-color: #CEEFFF;
border-bottom-color: #CEEFFF;
border-left-color: #CEEFFF;
}
#navigatie {
float: left;
width: 180px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-color: #CEEFFF;
border-right-color: #CEEFFF;
border-bottom-color: #CEEFFF;
border-left-color: #CEEFFF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
vertical-align: top;
background-color: #e8ebec;
height: 450px;
background-image: url(bg07-1.jpg);
background-repeat: repeat-y;
}
#navigatie ul {
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navigatie ul #index {
background-image: url(menu01.jpg);
}

#navigatie ul a #index {
height: 26px;
width: 180px;
}
#navigatie ul a #villa {
height: 26px;
width: 180px;
}
#navigatie ul a #villa:hover {
background-image: url(menu02a.jpg);
}
#navigatie ul #villa {
background-image: url(menu02.jpg);
}

#navigatie ul a#index:hover {
background-image: url(menu01a.jpg);
}
#navigatie ul a #fotos {
height: 26px;
width: 180px;
}
#navigatie ul #fotos {
background-image: url(menu03.jpg);
}
#navigatie ul a #fotos:hover {
background-image: url(menu03a.jpg);
}
#navigatie ul a #faciliteiten {
height: 26px;
width: 180px;
}
#navigatie ul #faciliteiten {
background-image: url(menu04.jpg);
}
#navigatie ul a #faciliteiten:hover {
background-image: url(menu04a.jpg);
}
#navigatie ul a #omgeving {
height: 26px;
width: 180px;
}
#navigatie ul a #omgeving:hover {
background-image: url(menu05a.jpg);
}
#navigatie ul #omgeving {
background-image: url(menu05.jpg);
}
#navigatie ul a #activiteiten {
height: 26px;
width: 180px;
}
#navigatie ul a #activiteiten:hover {
background-image: url(menu06a.jpg);
}
#navigatie ul #activiteiten {
background-image: url(menu06.jpg);
}
#navigatie ul a #prijzen {
height: 26px;
width: 180px;
}
#navigatie ul a #prijzen:hover {
background-image: url(menu07a.jpg);
}
#navigatie ul #prijzen {
background-image: url(menu07.jpg);
}
#navigatie ul a #reserveren {
height: 26px;
width: 180px;
}
#navigatie ul a #reserveren:hover {
background-image: url(menu08a.jpg);
}
#navigatie ul #reserveren {
background-image: url(menu08.jpg);
}
#navigatie ul a #contact {
height: 26px;
width: 180px;
}
#navigatie ul a #contact:hover {
background-image: url(menu09a.jpg);
}
#navigatie ul #contact {
background-image: url(menu09.jpg);
}
#navigatie ul a #gastenboek {
height: 26px;
width: 180px;
}
#navigatie ul a #gastenboek:hover {
background-image: url(menu10a.jpg);
}
#navigatie ul #gastenboek {
background-image: url(menu10.jpg);
}
#container #navigatie ul a #links {
height: 26px;
width: 180px;
}
#navigatie ul a #links:hover {
background-image: url(menu11a.jpg);
}
#navigatie ul #links {
background-image: url(menu11.jpg);
}


#navigatie ul li {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
float: left;
list-style-type: none;
display: block;
height: 26px;
width: 180px;
}



#mainContent {
margin: 0;
padding: 0px;
border-top-width: 5px;
border-right-width: 0px;
border-bottom-width: 3px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CEEFFF;
border-right-color: #CEEFFF;
border-bottom-color: #CEEFFF;
border-left-color: #CEEFFF;
}
#index {
background-image: url(menu01.jpg);
height: 26px;
width: 180px;
}

#mainContent2{
background-image: url(bg06.jpg);
border-right-width: 0px;
border-bottom-width: 5px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CEEFFF;
border-right-color: #CEEFFF;
border-bottom-color: #CEEFFF;
border-left-color: #CEEFFF;
margin-left: 185px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-top-width: 1px;
}
table tr td img{
margin-bottom: 0px;
margin-left: 40px;
margin-top: 20px;
border: 1px solid #FFF;
margin-right: 40px;
}
#table {
border: 2px solid #FFF;
}
#table table tr td {
border: 1px solid #FFF;
}





#footer {
height: 25px;
background-color: #d7a954;
font-size: 10px;
text-align: right;
width: 790px;
margin: 0px;
padding: 0px;
clear: left;
}
.float-right {
float: right;
margin-bottom: 5px;
margin-left: 10px;
}
.float-left {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
.float-center {
}

p {
font-size: 14px;
}
a {
color: #600;
}
#headcontainer #container #navigatie ul #index a {

}

ul {
font-size: 14px;
}
li {

}
h2 {
font-size: 14px;
font-style: normal;
}
h1 {
font-size: 24px;
} 

Het heeft iig niet te maken met, al geprobeerd en werkt niet.
Jij hebt de <a> om de <li> staan. Zo dus: <a><li>...</li></a>. Je moet het op deze manier doen: <li><a>...</a></li>. En dan via je css je display van de a-tag op block zetten. Bijvoorbeeld css:

div#navigatie a{
display: block;
}

Hier staat ie voorlopig online omdat de site die er al staat www.balivakantievilla.nl gemaakt is door mijn neef. Mij nschool wilde dat ik hem in HTML en CSS en PHP maakte vandaar nieuwe opzet.

http://student.aii.avans.nl/ICT/shpasch/SiteBali15-01-10/index.html
 
Laatst bewerkt door een moderator:
Beste "sasvdpasch"

Welkom op Helpmij :)

Het is echter niet toegestaan je vraag meerdere malen te stellen. Dit wordt crossposten genoemd.

Hierbij het verzoek in je andere vraag verder te gaan.

Deze vraag sluit ik
slotje.gif
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan