IE7 padding bug bei hover
5. Oktober 2008 | 21:51:06
Ich hatte heute das Problem, dass der IE7 bei der Darstellung einer Liste, die über hover-Effekte verfügte, nicht das Erwartete tat. Immer wenn ich mit der Maus über einen Listeneintrag gefahren bin, hat der IE7 die Liste auseinander gerissen. Ich konnte mir den Grund dafür nicht erklären, da es bei allen anderen Browsern (Firefox 3.0.1, Safari 3.1.2 sowie Chrome 0.2.149.30) wie gewünscht funktionierte.
Ich hatte eine Weile versucht das Problem zu beheben, bis mir klar wurde, dass es am pappding lag. Hatte ich nämlich den padding-Wert auf 0px gesetzt, so sah zwar die Liste ziemlich doof aus, aber es flackerte nicht mehr.
So konnte die Liste aber nicht bleiben - zumindest hatte ich schon mal einen Ansatzpunkt. Nachdem ich mir die Styles nochmal angesehen hatte, dachte ich mir, dass die Angabe des height-Attributes nicht schaden könnte. Und siehe da, es klappte. Die Liste sieht nun wieder brauchbar aus und verhält sich wie gewünscht.
Nachfolgend die Styles für die funktionierende Liste:
Ich hatte eine Weile versucht das Problem zu beheben, bis mir klar wurde, dass es am pappding lag. Hatte ich nämlich den padding-Wert auf 0px gesetzt, so sah zwar die Liste ziemlich doof aus, aber es flackerte nicht mehr.
So konnte die Liste aber nicht bleiben - zumindest hatte ich schon mal einen Ansatzpunkt. Nachdem ich mir die Styles nochmal angesehen hatte, dachte ich mir, dass die Angabe des height-Attributes nicht schaden könnte. Und siehe da, es klappte. Die Liste sieht nun wieder brauchbar aus und verhält sich wie gewünscht.
Nachfolgend die Styles für die funktionierende Liste:
#related_articles2 {
position: relative;
padding: 0px;
margin: 10px;
}
#related_articles2 ul {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
#related_articles2 li {
margin: 0px 8px;
border-bottom: 1px dotted #666666;
display: block;
padding: 5px;
height: 2em; /* hier die Höhe angeben */
}
#related_articles2 li.none {
display: none;
}
#related_articles2 li:hover{
background-color: #CC441F;
}
#related_articles2 li a {
text-decoration: none;
color: #f90;
cursor: pointer;
}
#related_articles2 li a:hover {
color: #ff0;
}
Artikel als Bookmark:
