moin moin,
habe schon mal gesucht, aber bisher nichts passendes gefunden. Vielleicht ist dieses Problem ja bekannt und schon oft diskutiert worden, dann entschuldigt bitte.
Habe folgendes Problem - Bei Darstellung im IE wird beim rollover Effekt (a:hover mit der Eigenschaft "background-color") die komplette ebene in der sich der link befindet auf dessen höhe abgeschnitten. Verzichtet man auf diese Eigenschaft, tritt der Fehler nicht auf.
Zur besseren Verständlichkeit hier der link:
http://www.moccascenes.de/hover_test/index.html
http://www.moccascenes.de/hover_test/styles.css
Hier das css:
***********
body, html {
font-family: Arial, sans-serif;
font-size: 11px;
margin: 0px;
}
#rahmen {
width: 700px;
position: absolute;
top: 0px;
left: 20px;
}
#content {
position: relative;
width: 100%;
background-color: #FFFFFF;
top: 0px;
margin-bottom: 20px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
border: 1px solid #999999;
}
#box {
position:relative;
min-height: 170px;
width: 700px;
margin-bottom: 15px;
border: 1px solid #999999;
}
#box img {
float: left;
border: 1px solid #999999;
}
a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #999999;
}
a {
font-weight: bold;
color:#FF33CC;
text-decoration: none;
}
***********
Bei den verlinkten Dateien handelt es sich um einen Auszug der gesammten Site, er soll lediglich die Problematik verdeutlichen. Um die einzelnen Layer besser voneinander zu unterscheiden habe ich ihnen einen rahmen gegeben. Dabei zeigt sich auch, dass der abstand vom "img", bzw. #box zum unteren Rand von #content viel zu groß dargestellt wird. Hierbei könnte es sich um den "Box-Modell-Fehler des Internet Explorers" handeln – ich bekomme das jedoch auch nicht gelöst.
Die beiden genannten Fehler werden in sämtlichen, von mir getesteten browsern korrekt dargestellt, sogar auf dem mac, nur der Win IE macht Probleme.
Für ein paar Anregungen wäre ich euch sehr dankbar.
grüße, mocca