Darstellungsproblem im IE
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
anhieb
blocken
code
copyright
display
first
image
index
item
level
list
position
posten
set
tagebuch
text
transparent url
url
zeile
-
Ich habe ein Problem in der Darstellung des IE 5.5 und IE 6.0 Dort wird die Zeile mit der Klasse "menulast" nicht richtig dargestellt. Im Quellcode (Zeile 44) habe ich die Höhe und Zeilenhöhe auf 6 px gestellt. Der IE 7 und IE 8 und der Firefox stellen diese Zeile auch mit 6 px Höhe dar, der IE 5.5 und der IE 6.0 aber nicht, da bleibt die Höhe bei 24 px stehen. Ich möchte aber auch dort eine Höhe von 6 px haben.
Link: www.melonenfans.de/menutest.php -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Steht doch alles im Quelltest?? Naja egal: Hab das entsprechende mal fett markiert
/* ==================== menu ==================== */ #info {height:500px;} /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/simple_vertical.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */ #menu_container {position:relative; width:980px; z-index:10;} /* Get rid of the margin, padding and bullets in the unordered lists */ #pmenu, #pmenu ul {padding:0px; margin:0px; list-style-type: none;} /* Set up the link size, color and borders */ #pmenu a, #pmenu a:visited {display:block;width:120px; color:#000000; height:25px; line-height:24px; text-decoration:none; text-align:center; border:1px solid #000000; border-width:0px 0px 0px 0px;} /* Set up the sub level borders */ #pmenu li ul li a, #pmenu li ul li a:visited {text-align:left; border-width:0px 1px 1px 1px; text-indent:5px;} #pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;} [b]#pmenu li a.menulast, #pmenu li a.menulast:visited, #pmenu li a.menulast:hover {height:6px; line-height:6px; background:url(images/menulast.png); background-repeat:no-repeat; background-position:top;}[/b] /* Set up the list items */ #pmenu li {float:left; background:#CCFF99;} /* For Non-IE browsers and IE7 */ #pmenu li:hover {position:relative;} /* Make the hovered list color persist */ #pmenu li:hover > a {background:#00CC33; color:#000000; border-bottom:1px solid #000000;} /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ #pmenu li ul {display:none;} /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ #pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;} /* Position the first sub level beneath the top level liinks */ #pmenu > li:hover > ul {left:-31px; top:16px;} /* get rid of the table */ #pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:10;} /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */ * html #pmenu li a:hover {position:relative; background:#00CC33; color:#000000;} /* For accessibility of the top level menu when tabbing */ #pmenu li a:active, #pmenu li a:focus {background:#00CC33; color:#000000;} /* Set up the pointers for the sub level indication */ #pmenu li.fly {background:#CCFF99 url(images/arrowright.gif) no-repeat right center;} #pmenu li.drop {background:#CCFF99 url(images/arrowdown.gif) no-repeat right center;} /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */ /* change the drop down levels from display:none; to visibility:hidden; */ * html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);} /* keep the third level+ hidden when you hover on first level link */ #pmenu li a:hover ul ul{ visibility:hidden; } /* keep the fourth level+ hidden when you hover on second level link */ #pmenu li a:hover ul a:hover ul ul{ visibility:hidden; } /* keep the fifth level hidden when you hover on third level link */ #pmenu li a:hover ul a:hover ul a:hover ul ul{ visibility:hidden; } /* keep the sixth level hidden when you hover on fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul { visibility:hidden; } /* make the second level visible when hover on first level link and position it */ #pmenu li a:hover ul { visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px; } /* make the third level visible when you hover over second level link and position it and all further levels */ #pmenu li a:hover ul a:hover ul{ visibility:visible; top:-11px; left:80px; } /* make the fourth level visible when you hover over third level link */ #pmenu li a:hover ul a:hover ul a:hover ul { visibility:visible; } /* make the fifth level visible when you hover over fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; } /* make the sixth level visible when you hover over fifth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; }
Es sind alle "lastemenu" betroffen, hab jetzt aber nur zwei markiert
<div id="menu_container"> <ul id="pmenu"> <li class="drop"><a href="#" title="Home">Home<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> [b]<li><a class="menulast"></a></li>[/b] <li><a href="#" title="Blabla">Blabla</a></li> <li class="fly"><a href="#" title="News">News<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> [b]<li><a class="menulast"></a></li>[/b] <li><a href="#" title="2008">2008</a></li> <li><a href="#" title="2009">2009</a></li> <li><a class="menulast"></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#" title="Admin">Admin</a></li> <li><a class="menulast"></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="drop"><a href="#" title="Tagebuch">Tagebuch<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a class="menulast"></a></li> <li class="fly"><a href="#" title="201X">201X<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a class="menulast"></a></li> <li><a href="#" title="2010">2010</a></li> <li><a href="#" title="2011">2011</a></li> <li><a href="#" title="2012">2012</a></li> <li><a class="menulast"></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="menulast"></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#" title="Test">Test</a></li> </ul> </div> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
