IE6: Bild rutscht aus Blocklink

[c--]

Hallo,

ich möchte mehrere Blocklinks untereinander anzeigen. Jeder Link soll über die ganze Breite gehen, links soll ein Bild sein und rechts daneben Text. Beim Mouseover soll das ganze umrahmt werden.

Mein Code funktioniert überall - außer im IE6.
Dort "rutscht" das Bild aus dem Link nach unten heraus. Wenn man mit der Maus darüberfährt, sieht man, dass der Rahmen nicht um den gesamten Linkblock geht, sondern *hinter* dem Bild verläuft.

In anderen Browsern, z.B. im Firefox, wird es wie gewünscht dargestellt.

Wie kann ich also den IE6 dazu bewegen, meine Links auch wie gewünscht darzustellen?

---

So sehen die Links aus:

<a href="Seite1/" class="blocklink">  
  
<img src="Bild1.jpg" alt="">  
  
Titel  
  
<br><br>  
Text  
</a>  
  
<a href="Seite2/" class="blocklink">  
  
<img src="Bild2.jpg" alt="">  
  
Titel  
  
<br><br>  
Text  
</a>  

Und hier der CSS-Teil:

.blocklink { display:block; border-width:2px; border-color:white; border-style:solid; padding:5px; overflow:hidden; font-weight:bold; text-decoration:none; font-size:20px; }  
.blocklink:hover { border-width:2px; border-style:dashed; border-color:gray; }  
.blocklink img { width:300px; float:left; margin-right:10px; }  

[ChrisB]

Hi,

Mein Code funktioniert überall - außer im IE6.
Dort "rutscht" das Bild aus dem Link nach unten heraus.

Der IE 6 setzt overflow nicht entsprechend um. Nutze eine andere Clearing-Methode.

<a href="Seite1/" class="blocklink">

<img src="Bild1.jpg" alt="">

Titel

<br><br>
Text
</a>

  
Die BR solltest du auch durch CSS ersetzen. Der Titel dürfte auf jeden Fall separat auszeichnungswürdig sein, der Text ggf. auch.  
Müssen bei mit im Link sein? Sonst böte sich ein Strukturierung mittels Block-Elementen ggf. eher an.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[c--]

Danke für die schnelle Antwort.

Der IE 6 setzt overflow nicht entsprechend um. Nutze eine andere Clearing-Methode.

In einer Testseite, die nur die Links enthält, habe ich zwei erfolgreiche Tests gemacht. Einmal habe ich "display:block;" ersetzt durch "display:inline-block; width:100%;". Im zweiten Fall habe ich vor das Ende vom Block (</a>) noch div style="clear:both;"></div> geschrieben.
In beiden Fällen hat der IE6 den Block richtig dargestellt.

Aber ich habe noch nicht gesagt, dass die Zielseite 3 Div-Blöcke hat. Ein Block oben auf ganzer Breite, darunter der zweite links mit fixer Breite und rechts davon nimmt der dritte Block den übrigen Platz ein.
In CSS sieht das so aus:

.div1 { position:fixed; left:0px; top:0px; right:0px; height:50px; }  
  
.div2 { position:fixed; left:0px; top:50px; bottom:0px; width:250px; overflow:auto; }  
  
.div3 { position:fixed; left:250px; top:50px; right:0px; bottom:0px; overflow:auto; }  

In meinem Versuch mit den inline-blocks werden alle Links unter div2 dargestellt (Abstand nach links stimmt aber noch), man muss also eine Fensterhöhe runterscrollen.
Im Versuch mit dem clear-div beginnt der erste Link zwar an richtiger Stelle, aber ab dem clear-div ist der Rest auch wieder unter div2.

Die BR solltest du auch durch CSS ersetzen.

Aus technischen oder semantischen Gründen?

Müssen bei mit im Link sein?

Diese Frage verstehe ich nicht.

[c--]

Aber ich habe noch nicht gesagt, dass die Zielseite 3 Div-Blöcke hat.

Ich sollte noch erwähnen, dass div3 die Links enthält.

[c--]

Noch eine Korrektur:
Ich habe falschen CSS-Code angegeben.

Hier ist der richtige CSS-Code für den IE6 für die äußeren divs:

.div1 { position:relative; height:50px; }  
  
.div2 { width:250px; float:left; }  
  
.div3 { margin-left:250px; margin-right:0px; margin-bottom:0px; }  

[ChrisB]

Hi,

Im zweiten Fall habe ich vor das Ende vom Block (</a>) noch div style="clear:both;"></div> geschrieben.

A darf als Inline-Element kein Block-Element wie DIV enthalten.

Die BR solltest du auch durch CSS ersetzen.

Aus technischen oder semantischen Gründen?

Aus semantischen. Und weil du mit CSS mehr Kontrolle über die Abstände hast.

Müssen bei mit im Link sein?

Diese Frage verstehe ich nicht.

Ups, das sollte beide heißen - müssen/sollen beide, Titel und Text, Bestandteil der Verlinkung sein?
Wenn nicht, ließe sich das ganze sinnvoller auszeichnen, Überschrift und Textabsatz bspw.

MfG ChrisB

[c--]

Im zweiten Fall habe ich vor das Ende vom Block (</a>) noch div style="clear:both;"></div> geschrieben.

A darf als Inline-Element kein Block-Element wie DIV enthalten.

Ich dachte, ich hätte mit display:block; ein Block-Element daraus gemacht?

Interessanter finde ich im Moment meinen ersten Versuch, bei dem ich die Links stattdessen als display:inline-block beschrieben habe. Wenn ich width:100%; angebe, schiebt der IE6 die Links höhenmäßig unter den unteren Rand von div2 - andere Browser zeigen teilweise eine horizontale Scrollbar in div3.
Wenn ich die Breite schrittweise reduziere, ändert sich das. Bei 95% zeigt der IE6 die Links richtig an (!?!?) und kein weiterer getesteter Browser (FF, IE7, IE8, Safari, Opera, Konqueror) zeigt horizontale Scrollbars.

Im Moment verstehe ich nur nicht, warum ich die 5% rechts nicht benutzen kann, um den Link auf 100% der Breite auszudehnen...

Ups, das sollte beide heißen - müssen/sollen beide, Titel und Text, Bestandteil der Verlinkung sein?

Ja.

[ChrisB]

Hi,

A darf als Inline-Element kein Block-Element wie DIV enthalten.

Ich dachte, ich hätte mit display:block; ein Block-Element daraus gemacht?

Zitat #1594 :-)

Du musst zwischen HTML und dessen Regeln, und CSS unterscheiden.
display beeinflusst lediglich die Darstellung.

Im Moment verstehe ich nur nicht, warum ich die 5% rechts nicht benutzen kann, um den Link auf 100% der Breite auszudehnen...

Vermutlich hast du die Default-Abstände der übergeordneten Elemente nicht berücksichtigt.

MfG ChrisB

[apsel]

Om nah hoo pez nyeetz, c--!

Verschwende nicht zuviel Energie auf den IE6. Sorge dafür, dass die Seite benutzbar ist. Schön muss sie in einem alten Browser nicht aussehen.

Matthias

[fastix®]

Moin!

Verschwende nicht zuviel Energie auf den IE6.

Wenn Sein Kunde sagt, dass die Seite im I6 einwandfrei auszusehen hat, dann hat der Kunde König recht. Er bezahlt es ja auch.

<a style="display:block; height:32px; width:100%"; background-image:url(/foo/bar.jpg); background-repeat:no-repeat; padding-left:37px; vertical-align:middle">foobar</a>

könnte das Problem - unter Verzicht auf die <br> auch für den IE6 lösen. Die Formatierung lässt sich auch auf Klassen übertragen.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix