Hover mit Schönheitsfehler im IE8

Webdesign & Technik HTML & CSS
#1

Guten Abend,

ich habe auf meiner Seite den Hover-Effekt eingebaut. IM IE6/7 und im Firefox funktioniert es tadellos. Nur der IE8 macht Probleme.
Wenn ich über den verlinkten Text fahre, springt dieser auseinander und beim Überfahren der Bilder erscheint ein weißer Balken unter diesen.
Kann mir jemand bei diesem Phänomen helfen? Danke.

Gruß Elsner

Testseite:http://elsner.bplaced.net/test/test.html

CSS:

[code]html,body {background-color:#555555;
color:#ffffff;
font-family:verdana,arial,sans-serif;
scrollbar-base-color:#555555;
scrollbar-arrow-color:#ffffff;
}

#alles {margin:0 auto;
text-align:center;
}
.kopf {width:800px;
height:150px;
margin:0 auto;
}
.kopflink {width:800px;
height:150px;
display:block;
margin:0 auto;
}
.kopfbild {background:url(kopf.jpg) no-repeat;
}
.kopflink:hover {background-position:0 -150px;
}
#navi {width:750px;
margin:15px auto 0px;
}
#navi_1 {width:750px;
margin:5px auto 0;
}
#inhalt {background:url(hintergrund_inhalt.jpg);
width:750px;
margin:15px auto 0px;
text-align: justify;
padding:10px;
border: 2px #000000 solid;
}
#navieinzelbild {text-align:center;
}

.td_galerie {vertical-align:top;
margin:0 auto;
text-align:center;
padding:10px 20px;
}
.galerieuebersicht {margin:0 auto;
}
#galeriebild {text-align:center;
margin:10px 0;
}
.kommentar {text-align:center;
}
.navi_galerie {margin:0 1em;
}

a:link, a:visited {color:#ffffff;
text-decoration:none;
}
a:link.link, a:visited.link {color:#ffffff;
text-decoration:underline;
}
a:hover {background-color:#ffffff;
color:#555555;
}
a:hover.link {color:#555555;
text-decoration:none;
}
a.bild:hover {background:transparent;
}

img {border:none;
}

#ueber_mich {float:right;
margin-left:10px;
}
#portfolio {text-align:center;
margin-top:10px;
}

form, h2, p {margin-bottom:0;
}

input, textarea {background-color:#555555;
color:#ffffff;
border-color:#000000;
}[/code]

#2

Der weiße Hintergrund vom a:hover erscheint bei Opera
zumindest auch. Vielleicht hilft es ja, die browser-Stilvorlage
für a und img zu überschreiben, besonders was margin und
padding anbelangt. Kann natürlich auch was damit zu tun haben,
wie Bilder relativ zur Textzeile positioniert werden und wie genau
da bei a-Elementen drum herum das übliche Unterstreichen oder
umranden in der browser-Stilvorlage realisiert wird.
Man kann natürlich auch a zum Blockelement
machen und dem exakt die gleiche Größe geben wie dem Bild,
wo man die Größe auch explizit angeben kann …

Wenn man bei den Verweisen um die Bilder herum gar keinen
weißen Hintergrund braucht, sollte man den auch nur für
Verweise angeben, in denen kein Bild steht …

#3

Klassischer Weise schreibe ich das ja so immer …

element.klasse:pseudoklasse
a.link:hover

Warum du das teilweise anders machst, erschliesst sich mir nicht. Außerdem solltest du natürlich auch deine Programmierung anhand des Validators von W3C überprüfen.

MfG
myPages

#4

@myPages: Warum ich das teilweise anders mache, hängt wohl daran, dass ich noch Anfänger bin und mich noch in der Lernphase befinde. Aber danke für den Validator. Ich wusste nicht, dass man die CSS-Datei auch auf Validität prüfen kann.

@hoffmann: Vielen Dank für deine Bemühungen. Kannst du mir eventuell ein paar Code-Vorschläge zur Umsetzung deiner Ideen machen?

Was ist mit dem Phänomen, dass der Text (hier z.B. Galerie 1 und Diverses) auseinander springt? Hat das jemand anders auch? Wie siehts z.B. bei Opera aus?

Vielen Dank.

Gruß Elsner

#5

Springen tut da bei Opera nichts.
Kann aber auch darauf hinweisen, daß bestimmte Dinge in den
browser-Stilvorlagen anders realisiert sind als bei anderen
browsern, das ist dann kein Fehler, sondern eine normale
Funktionalität von CSS.

Wenn sich bei dir kein Fehler mit dem Validator ergibt, kann
sich da systematisches Vorgehen lohnen, etwa für den Fehler
nicht notwendige CSS-Eigenschaften entsorgen, vereinfachen,
um Elemente testweise ein sichtbares ‘outline’ ziehen.
Von wegen Validator - die HTML-Fehler sollte man natürlich auch
entsorgen…
Und dann muß man etwas herumprobieren und gegebenenfalls
dann auch nachlesen, was wie spezifiziert ist, wenn man
herausfinden will, ob man da nur eine browser-Stilvorlage
überschreiben muß oder ob doch irgendwo ein Fehler bei einem
browser vorliegt.
Ich habe das in diesem Falle nicht ausprobiert, insofern kann ich
da jetzt nicht sagen, welche Eigenschaft man wie setzen oder
ändern muß, um das einheitlich erscheinen zu lassen.
Die verwendeten Eigenschaften scheinen mir aber so einfach
zu sein, daß man das auch ohne ‘conditional comments’ für
den MSIE hinbekommen sollte ;o)

Wenn die Eigenschaften zum a eigentlich gar nicht für die
Bilder gemeint sind, sondern für die Texte, kann man
natürlich die Angaben spezifischer machen, etwa:
.galerieuebersicht a:hover {} etc
statt nur a:hover {} etc
und der Tabelle mit den Bildern gibt man dann den
Klassennamen ‘galeriebilder’ statt
’galerieuebersicht’, dann kann man die Angaben dafür
ebenfalls leicht getrennt notieren und kann das Problem so
umgehen, zumindest was den weißen Hintergrund anbelangt.

#6

Hi,
hatte ähnliches Problem im IE8 und wie folgt umschifft:
als letzte Anweisungen in der css

a.lsym { display:block; padding:4px;} a.lsym:hover {background-color:#0000C6;}

background als beispiel, die gewählte Farbe besser ändern, padding anpassen,
im body bekommt das betreffende a-tag eine class verpasst:

Pit