Dropdownmenu in IE

[Tales]

Beste,

Ik heb mij na het volgen van de cursus hier op de site eindelijk gewaagd aan een eigen website. Ik ben een absolute beginneling en zie soms door het bos de bomen niet meer. Ondertussen ben ik erachter dat men soms in IE en FF niet dezelfde dingen te zien krijgt. Ik worstel dus met een dropdownmenu die in FF correct weergegeven wordt maar in IE niet.

Dit is de HTML code:

Code: Selecteer alles

<div id="centeredmenu">
   <ul>
      <li><a href="#">Tab one</a>
         <ul>
            <li><a href="#">Link one</a></li>
            <li><a href="#">Link two</a></li>
            <li><a href="#">Link three</a></li>
            <li><a href="#">Link four</a></li>
            <li><a href="#">Link five</a></li>
         </ul>
      </li>
      <li class="active"><a href="#" class="active">Tab two</a>
         <ul>
            <li><a href="#">Link one</a></li>
            <li><a href="#">Link two</a></li>
            <li><a href="#">Link three</a></li>
            <li><a href="#">Link four</a></li>
            <li><a href="#">Link five is a long link that wraps</a></li>
         </ul>
      </li>
      <li><a href="#">Long tab three</a>
         <ul>
            <li><a href="#">Link one</a></li>
            <li><a href="#">Link two</a></li>
            <li><a href="#">Link three</a></li>
            <li><a href="#">Link four</a></li>
            <li><a href="#">Link five</a></li>
         </ul>
      </li>
      <li><a href="#">Tab four</a>
         <ul class="last">
            <li><a href="#">Link one</a></li>
            <li><a href="#">Link two</a></li>
            <li><a href="#">Link three</a></li>
            <li><a href="#">Link four</a></li>
            <li><a href="#">Link five</a></li>
         </ul>
      </li>
   </ul>
</div>

Dit is de CSS code:

Code: Selecteer alles

/* Main menu settings */
#centeredmenu {
   clear:both;
   float:left;
   margin:0;
   padding:0;
   border-bottom:1px solid #000; /* black line below menu */
   width:100%;
   font-family:Verdana, Geneva, sans-serif; /* Menu font */
   font-size:90%; /* Menu text size */
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}

/* Top menu items */
#centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
#centeredmenu ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}
#centeredmenu ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:1em;
   line-height:1em;
   background:#ddd;
   text-decoration:none;
   color:#444;
   font-weight:bold;
   border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
   color:#fff;
   background:#000;
}
#centeredmenu ul li a:hover {
   background:#36f; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#36f; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:.8em;
   font-weight:normal; /* resets the bold set for the top level menu items */
   background:#eee;
   color:#444;
   line-height:1.4em; /* overwrite line-height value from top menu */
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:#36f; /* Sub menu items background colour */
   color:#fff;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}

De code heb ik van de volgende site en is dus niet van mij: http://matthewjamestaylor.com/blog/cent ... down-menus

Mijn dank is groot als er iemand mij kan helpen.

Mvg,
Tales.

[coderunner]

Beste Tales,

Ik veronderstel dat je geen of een verkeerde DOCTYP gebruikt.

Plaats helemaal bovenaan je code i.p.v.

Code: Selecteer alles

<html>

volgend DOCTYP

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

mvg,
Coderunner

[Tales]

Beste Coderunner,


Jij bent zoals gewoonlijk een topper en een grote aanwinst voor dit forum! Ik gebruikte inderdaad geen DOCTYPE omdat ik nog in een oefenfase zit en dacht dat dit niet nodig was, maar dankzij jouw hulp heb ik weer wat bijgeleerd.

Ik ben je ontzettend dankbaar en ik vrees dat ik je af en toe nog eens zal lastigvallen (als ik mag) want zit met nog zoveel vragen...

Mvg,
Tales.

[coderunner]

Beste Tales,

Dat is geen probleem en is graag gedaan. Bedankt om dit te melden.

Veel succes met het maken van je website.

mvg,
Coderunner

[Tales]

Ik geloof dat ik het moet melden als "probleem" is opgelost? Bij deze meld ik het even aan de moderator. Nogmaals bedankt voor je snelle hulp, Coderunner.

Mvg,
Tales