Hoi,

ik ben bezig met nieuwe joomla site, www . 787dreamliner . nl /index.php.
Hier heb ik dropdown menu voor gemaakt, in firefox en ie8 werkt het, maar in IE8 compatibiteitsweergaven staan ze niet goed onder elkaar, heeft iemand een idee wat ik moet toevoegen / veranderen in css?

Denk dat het in dit stukje css zit:
.menu-top li ul{
margin-top:30px;
padding-top:5px;
width:175px;
left:0px;
list-style:none;
display:none;
position: absolute;
background: none;
z-index:50;
}

Je weet dat Firefox de padding bij de height oprekend, wat IE niet doet, dus ik zeg een speciale stylesheet aanmaken voor IE en daar de 5px bij de height oprekenen.

ik ben nog even aan het testen geweest,
als ik position op relative zet dan komen de subitems wel onder het hoofditem te staan alleen schuift het volgende hoofditem naar rechts op het moment dat er subitems getoond worde..

Suggesties?:)

zou evt best kunnen dat aan ander stuk css ligt,

hele css van menu is:

.menu-top{
margin:0 auto;
padding:0 auto;
}
.menu-top ul{
margin:0px;
padding:0px;
list-style:none;
}
.menu-top li{
float:left;
display:block;
position:relative;
padding:0px;
margin-left:0px;
margin-right:5px;
line-height:30px;
}
.menu-top li span{
padding:0 10px 0;
display:block;
}

.menu-top li a, a:visited{
color:#FFFFFF;
text-decoration:none;
float:left;
display:block;
height:30px;
background:url(../images/link_left.png) repeat-x left top;
}
.menu-top li a span, a:visited span{
background:url(../images/link_right.png) no-repeat right top;
display:block;
}
.menu-top li a:hover{
color:#FFFFFF;
text-decoration:none;
float:left;
display:block;
height:30px;
background:url(../images/hover_left.png) repeat-x left top;
}
.menu-top li a:hover span{
background:url(../images/hover_right.png) no-repeat right top;
display:block;
}
.menu-top li#current a{
color:#FFFFFF;
text-decoration:none;
float:left;
display:block;
height:30px;
background:url(../images/hover_left.png) repeat-x left top;
}
.menu-top li#current a span{
background:url(../images/hover_right.png) no-repeat right top;
display:block;
}
.menu-top li ul{
margin-top:30px;
padding-top:5px;
width:175px;
left:0px;
list-style:none;
display:none;
position: static;
background: none;
z-index:50;
}
.menu-top li>ul { /* postitie resetten voor alle browsers behalve IE */
top: auto;
left: auto;
}
.menu-top li:hover ul, li.over ul { /* lists nested onder hovered list items */
display: block;
}
.menu-top li li a{
background:url(../images/link-sub.png) repeat-x left top;
display:block;
color:#FFFFFF;
padding-bottom:5px;
margin:0px;
width:175px;
z-index:50;
}
.menu-top li li a span{
background:url(../images/link-sub.png) no-repeat right top;
display:block;
color:#FFFFFF;
width:auto;
}
.menu-top li li a:hover{
background:url(../images/hover-sub.png) repeat-x left top;
display:block;
color:#000000;
padding-bottom:5px;
margin:0px;
width:175px;
}
.menu-top li li a:hover span{
background:url(../images/hover-sub.png) no-repeat right top;
display:block;
color:#000000;
width:auto;
}
.menu-top li li#current a{
color:#FFFFFF;
text-decoration:none;
display:block;
background:url(../images/hover-sub.png) repeat-x left top;
}
.menu-top li li#current a span{
background:url(../images/hover-sub.png) no-repeat right top;
display:block;
}

Het heeft er mee te maken dat inline en list items geen padding mee krijgen in IE. Tenminste, als ze geen display block krijgen. Hoe je dit het beste kunt op lossen is of de li een display: block mee geven, en de anchor ook, of je moet met ie stylesheets gaan werken. Heb hetzelfde probleem ook, en ie6 en 7 vallen wat dat betreft nog mee, maar ie8 rendert het nog weer anders, die padding kun je namelijk niet resetten.