mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 21:51 Benutzername: Passwort: Auto-Login

Thema: CSS a:hover und float:left will im IE6 nicht richtig vom 20.09.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS a:hover und float:left will im IE6 nicht richtig
Autor Nachricht
top
Moderator
Threadersteller

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Do 20.09.2007 10:20
Titel

CSS a:hover und float:left will im IE6 nicht richtig

 Antworten mit Zitat Zum Seitenanfang
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
  View user's profile Private Nachricht senden
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 20.09.2007 10:57
Titel

Antworten mit Zitat Zum Seitenanfang
Lass mich nicht lügen aber ich glaub das liegt am span.
Code:

a.info:hover span {

mach mal
Code:
a.info:hover


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.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
top
Moderator
Threadersteller

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Do 20.09.2007 12:28
Titel

Antworten mit Zitat Zum Seitenanfang
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
  View user's profile Private Nachricht senden
top
Moderator
Threadersteller

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Do 20.09.2007 15:43
Titel

Antworten mit Zitat Zum Seitenanfang
Ich fass es nicht! Au weia!

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.
* huduwudu! *
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.
* Keine Ahnung... *
  View user's profile Private Nachricht senden
 
Ähnliche Themen Div Float Left Problem
Frage zu float & clear:left
5 divboxen mit float left nebeneinander?
Probleme CSS IE overflow und float:left
[Float: Left] Fetter Fehler
float:left höhe anpassen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB