M
mlaukel
Hallo,
ich habe ein CSS Dropdown auf meiner Seite eingebaut. Und sobald ich einen Link im 2. Level anklicke und darauf durchs menü scrolle, sind Unterpunkte schmaler dargestellt als vorgegeben (siehe Screenshot). Dieses Phänomen tritt nur im IE 6.0 auf, bei IE 7.0 & IE 5.5 ist die Darstellung korrekt. Meine Stylesheets:
Menu Style
Wrapper Style
Text style
Und hier der Menu Html-Code
Ich hoffe jemand kann helfen, ich finde das Problem nicht. Danke !
ich habe ein CSS Dropdown auf meiner Seite eingebaut. Und sobald ich einen Link im 2. Level anklicke und darauf durchs menü scrolle, sind Unterpunkte schmaler dargestellt als vorgegeben (siehe Screenshot). Dieses Phänomen tritt nur im IE 6.0 auf, bei IE 7.0 & IE 5.5 ist die Darstellung korrekt. Meine Stylesheets:
Menu Style
Code:
/* style the outer div to give it width */
.menu {
width:775px;
font-size:0.85em;
padding-bottom:0;
margin-left:1px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:215px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:129px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#000;
width:118px;
height:35px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#d9e3eb;
padding-left:10px;
line-height:34px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:129px;
w\idth:118px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#d9e3eb;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#5a8ec6;
}
.menu ul ul :hover > a.drop {
background:#5a8ec6;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:36px;
left:0;
width:215px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:35px;
t\op:36px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d9e3eb;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:215px;
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:215px;
w\idth:194px;
}
.menu ul ul li {
float:left;
width:215px;
position:relative;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#5a8ec6;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#5a8ec6;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}Wrapper Style
Code:
/* CSS Document */
* {
margin: 0;
padding: 0;
font-size: 100.01%;
}
img {
display:block;
}
.none {
display: none;
}
#wrapper{
width:950px;
float:left;
text-align:left;/*for IE5.x*/
}
/*Begin style for row DIVs*/
#head{
width:950px;
height:110px;
}
#midsect{
width:950px;
height:40px;
}
#basesect{
width:950px;
height:524px;
}
#bottomsect{
width:950px;
}
/*end style for row DIVs*/
/*Begin style for column DIVs*/
#head{
width:950px;
height:110px;
float:none;
}
#spacerleft{
width:175px;
height:40px;
float:left;
margin-right:0 !important;
margin-right:-3px;
}
#naviright{
width:775px;
height:40px;
float:right;
margin-left:0 !important;
margin-left:-3px;
}
#menuleft{
width:175px;
height:524px;
float:left;
margin-right:0 !important;
margin-right:-3px;
}
#contentright{
width:775px;
height:524px;float:right;
margin-left:0 !important;
margin-left:-3px;
}
#bottomspacerleft{
width:415px;
float:left;
margin-left:0 !important;
margin-left:-3px;
}
#bottomcontentright{
width:474px;
float:left;
margin-left:0 !important;
margin-left:-3px;
}
#bottomright{
width:61px;
float:right;
margin-left:0 !important;
margin-left:-3px;
}
/*end style for column DIVs*/Text style
Code:
body {
background-color: #FFFFFF;
color: #000000;
font: normal 0.8em/1.2em Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5;
}
a {
color: #800000;
text-decoration: none;
}
a:visited {
color: #800000;
}
a:hover {
color: #800000;
text-decoration: underline;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}Und hier der Menu Html-Code
Code:
<div class="menu">
<ul>
<li><a href="index_de.php">Home</a></li>
<li><a href="#">Produkte<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="inv_pl.php" title="Investitionspläne">Investitionspläne</a></li>
<li><a href="bplan.php" title="Businessplanerstellung">Businessplanerstellung</a></li>
<li><a href="ueb.php" title="Übersetzung">Übersetzung</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Projekte<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="akt_proj.php" title="aktuelle Projekte">aktuelle Projekte</a></li>
<li><a href="gepl_proj.php" title="geplante Projekte">geplante Projekte</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Charts<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="trends.php" title="Profittrends">Profittrends</a></li>
<li><a href="bcharts.php" title="Börsencharts">Börsencharts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Über uns<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="team.php" title="Das Team">Das Team</a></li>
<li><a href="ziele.php" title="Unsere Ziele">Unsere Ziele</a></li>
<li><a href="phil.php" title="Philosophie">Philosophie</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>Ich hoffe jemand kann helfen, ich finde das Problem nicht. Danke !
