mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 14:00 Benutzername: Passwort: Auto-Login

Thema: [IE6 CSS Bug] boxen springen bei hover vom 09.06.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [IE6 CSS Bug] boxen springen bei hover
Seite: 1, 2, 3  Weiter
Autor Nachricht
Kai.S
Threadersteller

Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht: Männlich
Verfasst Mo 09.06.2008 11:08
Titel

[IE6 CSS Bug] boxen springen bei hover

Antworten mit Zitat Zum Seitenanfang

Hey Leute,

ich hoffe jemand kann mir helfen, ich weiss nicht mehr was ich noch machen soll.
* Keine Ahnung... *
Im folgenden Layout hab ich schon sooo viele Bugs im IE6 gefixt aber einen bekomm ich einfach nicht weg.
Wenn man mit der Maus ein paar mal über die Anker in den unteren Podcasts hovert, fliegen die Boxen eine Zeile tiefer, als würden keine drei Boxen mehr in eine Reihe passen.

Hat jemand vielleicht eine Ahnung, wie ich das fixen kann?

http://www.final-interactive.de/temp/myradio/bottom.html

Bin über jede Hilfe mehr als dankbar!


Zuletzt bearbeitet von Kai.S am Mo 09.06.2008 11:11, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 09.06.2008 12:28
Titel

Antworten mit Zitat Zum Seitenanfang

Es gibt ein paar übliche Verdächtige, aber validiere erstmal - u.a. ist Deine CC-Syntax falsch. Und wirf eh die ganzen Kommentare aus dem Head (z.B. im style-Element etc.), das ist heutzutage eher kontraproduktiv (wo nötig, nimm CDATA).
  View user's profile Private Nachricht senden
Anzeige
Anzeige
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 09.06.2008 12:45
Titel

Antworten mit Zitat Zum Seitenanfang

Löst jetzt zwar nicht das Problem, aber das könnte für
Dich bzw. für dier IE6-Darstellung mglw. auch interessant sein:
http://www.mister-pixel.com/#Content__state=is_that_simple

Und hast du schonmal versucht die .podcast relative
zu positionieren?

Gruß

zweitaccount
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 09.06.2008 13:52
Titel

Antworten mit Zitat Zum Seitenanfang

der IE verhaspelt sich gerne mal bei sich länger forsetzenden floats. wenn du nach jeder reihe ein clearendes Element setzt, respektive einen container mit clearfix drum machst, tritt der fehler nicht mehr auf.
Code:

<style type="text/css" media="screen, projection">
/*  Aufheben von Floats ohne zusaetzliches Markup
   http://www.jassesnee.de/easyclear/  */   
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.clearfix {
   display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
   height: 1%;
}
.clearfix {
   display: block;
}
/* End hide from IE-mac */
</style>


Code:

      <h2>Die besten Sport-Channel</h2>
      <div class="clearfix">
         <div class="podcast top">
            <h1><a href="#pc1" class="audio">n-tv Der Nachrichten-Podcasts mit einem wirklich langen Titel</a></h1>
            <div class="left-float">
               <p><a href="#pc1"><img src="bottom-Dateien/podcast-mid.jpg" alt="This is just a Content-Dummy" height="82" width="82"></a></p>
               <ul class="rating">
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-white.gif" alt="" height="14" width="14"></li>
               </ul>
            </div>
            <p>Erfahren Sie in 60 Sekunden die wichtigsten Wirtschaftsnachrichten und noch etwas mehr Text wire zu vor hat jetzt hier Platz...</p>
            <p class="more"><a href="#more">Mehr Infos</a></p>
            <p class="controls"><a class="abo" href="#abo">abo</a><a class="play" href="#play">play</a></p>
         </div>
         <div class="podcast tip">
            <h1><a href="#pc2" class="audiovideo">n-tv Der Einzeilige Podcasts</a></h1>
            <div class="left-float">
               <p><a href="#pc1"><img src="bottom-Dateien/podcast-mid.jpg" alt="This is just a Content-Dummy" height="82" width="82"></a></p>
               <ul class="rating">
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-white.gif" alt="" height="14" width="14"></li>
               </ul>
            </div>
            <p>Erfahren Sie in 60 Sekunden die wichtigsten Wirtschaftsnachrichten und noch etwas mehr Text wire zu vor hat jetzt hier Platz...</p>
            <p class="more"><a href="#more">Mehr Infos</a></p>
            <p class="controls"><a class="abo" href="#abo">abo</a><a class="play" href="#play">play</a></p>
         </div>
         <div class="podcast">
            <h1><a href="#pc3" class="video">n-tv Der Nachrichten-Podcasts mit einem wirklich langen Titel</a></h1>
            <div class="left-float">
               <p><a href="#pc1"><img src="bottom-Dateien/podcast-mid.jpg" alt="This is just a Content-Dummy" height="82" width="82"></a></p>
               <ul class="rating">
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-white.gif" alt="" height="14" width="14"></li>
               </ul>
            </div>
            <p>Erfahren Sie in 60 Sekunden die wichtigsten Wirtschaftsnachrichten und noch etwas mehr Text wire zu vor hat jetzt hier Platz...</p>
            <p class="more"><a href="#more">Mehr Infos</a></p>
            <p class="controls"><a class="abo" href="#abo">abo</a><a class="play" href="#play">play</a></p>
         </div>
      </div>
      <div class="clearfix">
         <div class="podcast top">
            <h1><a href="#pc1" class="audio">n-tv Der Nachrichten-Podcasts mit einem wirklich langen Titel</a></h1>
            <div class="left-float">
               <p><a href="#pc1"><img src="bottom-Dateien/podcast-mid.jpg" alt="This is just a Content-Dummy" height="82" width="82"></a></p>
               <ul class="rating">
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-white.gif" alt="" height="14" width="14"></li>
               </ul>
            </div>
            <p>Erfahren Sie in 60 Sekunden die wichtigsten Wirtschaftsnachrichten und noch etwas mehr Text wire zu vor hat jetzt hier Platz...</p>
            <p class="more"><a href="#more">Mehr Infos</a></p>
            <p class="controls"><a class="abo" href="#abo">abo</a><a class="play" href="#play">play</a></p>
         </div>
         <div class="podcast tip">
            <h1><a href="#pc2" class="audiovideo">n-tv Der Einzeilige Podcasts</a></h1>
            <div class="left-float">
               <p><a href="#pc1"><img src="bottom-Dateien/podcast-mid.jpg" alt="This is just a Content-Dummy" height="82" width="82"></a></p>
               <ul class="rating">
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-white.gif" alt="" height="14" width="14"></li>
               </ul>
            </div>
            <p>Erfahren Sie in 60 Sekunden die wichtigsten Wirtschaftsnachrichten und noch etwas mehr Text wire zu vor hat jetzt hier Platz...</p>
            <p class="more"><a href="#more">Mehr Infos</a></p>
            <p class="controls"><a class="abo" href="#abo">abo</a><a class="play" href="#play">play</a></p>
         </div>
         <div class="podcast">
            <h1><a href="#pc3" class="video">n-tv Der Nachrichten-Podcasts mit einem wirklich langen Titel</a></h1>
            <div class="left-float">
               <p><a href="#pc1"><img src="bottom-Dateien/podcast-mid.jpg" alt="This is just a Content-Dummy" height="82" width="82"></a></p>
               <ul class="rating">
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-red.gif" alt="" height="14" width="14"></li>
                  <li><img src="bottom-Dateien/star-white.gif" alt="" height="14" width="14"></li>
               </ul>
            </div>
            <p>Erfahren Sie in 60 Sekunden die wichtigsten Wirtschaftsnachrichten und noch etwas mehr Text wire zu vor hat jetzt hier Platz...</p>
            <p class="more"><a href="#more">Mehr Infos</a></p>
            <p class="controls"><a class="abo" href="#abo">abo</a><a class="play" href="#play">play</a></p>
         </div>
      </div>
   </div>


Zuletzt bearbeitet von sahnemuh am Mo 09.06.2008 13:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kai.S
Threadersteller

Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht: Männlich
Verfasst Mo 09.06.2008 14:18
Titel

Antworten mit Zitat Zum Seitenanfang

Hmm danke Sahnemuh, aber bei mir tritt der Fehler trotz clearfix noch auf *Schnief*
Soweit ich weiß macht der IE6 doch sowieso kein :after Element

Die <h2> cleared ja jeweils die floatenden Elemente, kann es sein, dass es an vorhergehenden nicht geclearten Floats liegt?

Ich habe overflow:auto gesetzt um floatende Elemente einzuschließen, statt mit .clearfix zu clearen.
Laut: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

@zweitaccount: position:relative; hat auch nix gebracht *Schnief*


Zuletzt bearbeitet von Kai.S am Mo 09.06.2008 14:25, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 09.06.2008 14:47
Titel

Antworten mit Zitat Zum Seitenanfang

Also in meiner Testumgebung funktioniert das wunderbar *Schnief*

Ich hab mir deine Seite gespeichert und Einmal in ner VM mit ner frischen IE6 Installation und einmal mit Multiple IE getestet [ test gib's hier ].
Nachdem ich den Container drum hatte, hüpfte da nix mehr.
Was ich noch getan habe, ist die Conditional-Comments in deinem Dokument richtig zu setzen - eventuell tut es das auch schon.
Ansonsten versuch mal ob der Fehler auch auftritt, wenn du die .htc auskommentierst.

Was mir sonst noch einfällt, wäre den Containern .podcast probeweise hasLayout zu verpassen (height: 1%*zwinker* und ihnen ein display: inline zu geben (ausschließen, dass beim hovern [wie auch immer] der IE doubles margin bug auftritt).






Zum Thema IE6 und :after
http://www.jassesnee.de/easyclear/ hat geschrieben:
Da der IE/Win das Pseudoelement :after nicht unterstützt, muß man sich auf seinen "auto-clearing" Effekt verlassen, wobei dieser ja nur dann eintritt, wenn das clear-Element eine definierte Ausdehnung aufweist. In vielen Fällen ist die Angabe einer Höhe oder auch Breite unerwünscht, aber glücklicherweise kommt der Holly-Hack zu unserer Rettung. Dieser Hack zeigt im IE/Win und zwar nur im IE/Win eine einfache 1% Höhe für den Container an. Was bewirkt das? Der IE hat die im Widerspruch zu den W3C Spezifikationen stehende Eigenschaft, alle Boxen zu erweitern bis die Inhalte eingeschlossen sind, unabhängig von vergebenen Werten die kleiner sein können. So wird die 1% Höhe nur bis zu dem benötigten Wert erweitert, um ein Float-Element einzuschließen. Allein das Anwenden eines Größenwertes löst den "auto-clearing" Effekt aus.
  View user's profile Private Nachricht senden
Kai.S
Threadersteller

Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht: Männlich
Verfasst Mo 09.06.2008 15:38
Titel

Antworten mit Zitat Zum Seitenanfang

hmm das versteh ich mal garnicht *Schnief*

Bei mir wills einfach nicht. Ich versteh das nicht!

Siehe: http://www.final-interactive.de/temp/myradio/bottom_fix.html

Die ZIP von Dir ist ja komplett ohne Grafiken, da hüpft bei mir auch nix.

Wo war denn im CC ein Fehler? Hab jetzt mal deinen Code kopiert, die Seite validiert mittlerweile auch (wieder).


Zuletzt bearbeitet von Kai.S am Mo 09.06.2008 15:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 09.06.2008 16:35
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn du die beiden Container um die unteren .podcast reihen in meinem Testdokument rausschmeißt, hüpft es genau so wie es das bei deiner Seite tut. Wenn es sich mit Bildern anders verhält, wäre das seltsam. Schließlich änderst du nur nen Background-Image... oder - das dürfte ja eigentlich an den Dimensionen des Containers nix machen...!?



Es gibt auf deiner Seite immernoch Warnings (siehe hier). Wie Heiko schon schrieb: sinnvollerweise solltest du deine scriptblöcke nicht auskommentieren, sondern in CDATA Blöcke setzen. Bei den Styleangaben kannst du die Kommentare auch rauswerfen - genau so wie die Anführungszeichen um die URL Angabe - die führen erfahrungsgemäß beide gerne mal zu Problemen.

Bsp:
Code:

<style type="text/css" media="screen, projection">
      @import url(bottom.css);
</style>
<script type="text/javascript">
   //<![CDATA[
      //if (top.frames.length == 0) { window.location.replace("index.html"); }
   //]]>
</script>
<script type="text/javascript" src="bottom-Dateien/swfobject.js"></script>
<script type="text/javascript">
   //<![CDATA[
      swfobject.registerObject("myId", "9.0.0", "js/swfobject2/expressInstall.swf");
   //]]>
</script>




Kommentare in Kommentaren sind nicht valide:
Code:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
<!--
@import url("ie6.css");
-->
</style>
<![endif]-->

sollte demnach so aussehen:
Code:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
@import url(ie6.css);
</style>
<![endif]-->



Die Conditional Comments im Content sind ebenfalls nicht richtig:
Code:
                  <!--[if !IE]>-->
                  <object type="application/x-shockwave-flash" data="swf/teaser.swf" width="516" height="97">
                  <!--<![endif]-->

richtig:
Code:
                        <!--[if !IE]><!--> 
                           <object type="application/x-shockwave-flash" data="bottom-Dateien/teaser.swf" height="97" width="516">
                        <!--<![endif]-->
                        <div>
                           <h1>No Flash detected!</h1>
                           <p><a href="http://www.adobe.com/go/getflashplayer"><img src="bottom-Dateien/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                        </div>
                        <!--[if !IE]><!-->
                           </object>
                        <!--<![endif]-->



Ich hab hier noch mal ne saubere Version der bottom.html hochgeladen:
www.o315.de/tmp/mgi/bottom.html - probier mal ob es damit geht.. bei mir tut's das auf jeden Fall.
  View user's profile Private Nachricht senden
 
Ähnliche Themen hover-Button/hover-Bild wird darunter eingefügt
Springen bei refresh verhindern
hin und her springen der Seite verhindern via CSS
Im Iframe zu Anker springen
AS3 Stoppuhr - Springen der zahlen verhindern
[Flash CS3] - Figur springen lassen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
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.