| Autor |
Nachricht |
top
Dabei seit: 25.11.2003
Ort: nördlich der Elbe
Alter: 36
Geschlecht: 
|
Verfasst Do 20.09.2007 10:20
Titel CSS a:hover und float:left will im IE6 nicht richtig |
  |
|
Hi,
Ich habe schon ein paar mal CSS genutzt um per Rollover ein Bild zu wechseln/einzublenden.
Diesmal will ich zusätzlich noch etwas Text rechts neben dem Bild auftauchen lassen.
Damit der Text auch mehrzeilig neben dem Bild möglich ist, habe ich dieses mit "float: left;" gelöst. Leider macht mal wieder der IE6 nur fast das was er soll. Beim überfahren wird das Bild ein paar Pixel nach rechts verschoben. Ich habe schon alle Elemente die mir eingefallen sind mit margin und padding auf Null gesetzt - ohne Erfolg.
Testseite
Jemand eine Idee wie man im IE6 diesen Versatz verhindert?
Ich bin auch für andere Lösungsansätze offen...
Hier noch mal der Quellcode:
| Code: | <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
a.info {
z-index: 24;
text-decoration: none;
position: relative;
}
a.info:hover {
z-index: 25;
background-color: #ffffee;
cursor: default;
}
a.info span {
display: none;
}
a.info:hover span {
display: block;
width: 400px;
position: absolute;
background-color: #eeffff;
z-index: 26;
margin: 0px;
padding: 0px;
}
a.info span img {
float: left;
}
a.info2 {
z-index: 24;
text-decoration: none;
position: relative;
}
a.info2:hover {
z-index: 25;
background-color: #ffffee;
cursor: default;
}
a.info2 span {
display: none;
}
a.info2:hover span {
display: block;
width: 400px;
position: absolute;
background-color: #eeffff;
z-index: 26;
margin: 0px;
padding: 0px;
}
/*
a.info2 span img {
float: left;
}
*/
-->
</style>
</head>
<body>
Mit float: left<br />
<a href="#" class="info"><span><img src="bilder/mitarbeiter.jpg" width="120" height="180" border="0">Bla Blub<br>
gkfsl</span><img src="bilder/mitarbeiter_sw.jpg" border="0" height="180" width="120"></a><br />
<hr />
Ohne float: left<br />
<a href="#" class="info2"><span><img src="bilder/mitarbeiter.jpg" width="120" height="180" border="0">Bla Blub2<br>
gkfsl2</span><img src="bilder/mitarbeiter_sw.jpg" border="0" height="180" width="120"></a><br />
</body>
</html>
|
Zuletzt bearbeitet von top am Do 20.09.2007 12:29, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 22
Geschlecht:
|
Verfasst Do 20.09.2007 10:57
Titel
|
|
|
Lass mich nicht lügen aber ich glaub das liegt am span.
| Code: |
a.info:hover span { |
mach mal
oder wens nicht geht lass die classen aus dem hover weg und leg darum nen div/span der die classe hat
ie6 reagiert nur auf hover befehle die au einem link liegen.
|
|
| |
|
|
top
Dabei seit: 25.11.2003
Ort: nördlich der Elbe
Alter: 36
Geschlecht:
|
Verfasst Do 20.09.2007 12:28
Titel
|
|
|
Prinzipiell funktioniert es ja auch im IE6.
Mich stört nur, dass das neu eingeblendete Bild beim IE6 ein paar Pixel nach rechts rutscht. Wenn ich das "float: left;" entferne, verrutscht das Bild nicht mehr - aber dann habe ich den Text nicht mehr mehrzeilig neben dem Bild.
Zur Verdeutlichung habe ich den Beispieldatei (und den Quelltext oben) mal etwas angepasst:
Testseite
|
|
| |
|
|
top
Dabei seit: 25.11.2003
Ort: nördlich der Elbe
Alter: 36
Geschlecht:
|
Verfasst Do 20.09.2007 15:43
Titel
|
|
|
Ich fass es nicht! 
Da habe ich mich gerade damit abgefunden auf einen CSS-Hack zurück zu greifen um das Bild im IE6 3 Pixel nach links zu verbiegen, und dann löst sich das Problem bei der weiteren Gestaltung von selbst.
 | Code: | a.info span img {
float: left;
margin-right: 8px;
} |
Fragt mich nicht warum - aber als ich einen Abstand zwischen Bild und Text auf diese Weise definiert habe, will auch der IE6 das Bild an die richtige Stelle setzen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS-Design] Lücke zwischen 2 DIVS trotz float:left
CSS: display-inline und float-left - trotzdem Umbruch danach
[IE6 CSS Bug] boxen springen bei hover
Listenaufzählungszeichen verschwinden bei float:left
[Float: Left] Fetter Fehler
5 divboxen mit float left nebeneinander?
|
|
Willkommen auf dem Portal für Mediengestalter
