Seltsamer 1px-Abstand zwischen Bild und Rahmen bei IE5.5

[Olaf Schneider]

Hallo,

Ich versehe ein Bild mit der Höhe von 407 Pixel mit einem Rahmen. Sowohl Bildformat als auch Rahmen sind über css formatiert. Alle Browser, auch IE5.0 und IE6.0 stellen das problemlos dar, bloss der IE 5.5 zeigt zwischen dem unteren Rahmen und dem unteren Bildrand eine 1px hohe Lücke in der Hintergrundfarbe an.

Zu sehen unter http://foto.olafschneider.de/2006/helagsUndRogen

Ausschnitt aus dem pic2.css:

  
#broadImg2 {  
    height: 407px;  
    width: 928px;  
}  

Ausschnitt aus dem content.css:

  
#content img {  
 border: 1px solid #B6BDC7;  
 margin-top: 80px;  
}  

Ausschnitt aus dem Markup (xhtml 1.0 strict):

  
<div id="content">  
    <img id="broadImg2" src="EGAL" alt="" />  
    <h1>EGAL</h1>  
</div>  

Ist jemand diesem Problem, vielleicht auch Bug schon einmal begegnet?

Gruß
Olaf Schneider

[Olaf Schneider]

Nachtrag:

Ein Reload mischt die Karten jedes Mal neu: Manchmal wird das Bild wie erwartet angezeigt, manchmal mit der erwähnten Lücke. Das gilt auch für die kleineren Bilder, die auf der Folgeseite angezeigt werden.

Gruß
Olaf Schneider

[Der Martin]

Hallo Olaf,

[...] bloss der IE 5.5 zeigt zwischen dem unteren Rahmen und dem unteren Bildrand eine 1px hohe Lücke in der Hintergrundfarbe an.
Zu sehen unter http://foto.olafschneider.de/2006/helagsUndRogen

Das kann ich nicht nachvollziehen. Sowohl im IE 5.5 als auch auch im FF sehe ich nur den von dir definierten 1px breiten graublauen Rahmen. Auch bei mehrfachem Reload.

Ausschnitt im IE:
 
 Gesamtes Bild, 353k PNG

Ausschnitt im FF:
 
 Gesamtes Bild, 307k PNG

Dafür vermatscht der Firefox bei mir deine Bildunterschriften, währende der IE mit der Stelle ohne Schwierigkeiten klarkommt.

Schönes Wochenende noch,
 Martin

[Olaf Schneider]

Hallo Martin,

vielen Dank für Deine ausführliche Antwort.

Das kann ich nicht nachvollziehen. Sowohl im IE 5.5 als auch auch im FF sehe ich nur den von dir definierten 1px breiten graublauen Rahmen. Auch bei mehrfachem Reload.

Hm, dann ist mein IE5.5 unter Virtual PC auf Mac OS X vielleicht doch minimal anders gestrickt. Bis jetzt hatte ich solche Probleme noch nicht.

Dafür vermatscht der Firefox bei mir deine Bildunterschriften, währende der IE mit der Stelle ohne Schwierigkeiten klarkommt.

OK, erwischt. Das ist ein bekannter Fehler. Wenn man das Fenster vertikal verkleinert, taucht der Scrollbalken erst dann auf, wenn Bildunterschrift und Navigation schon ineinander geschmolzen sind. Ich wollte demnächst eh eine Coderevision machen und dann auch dieses Problem lösen. Aber die Zeit …

Schönes Wochenende noch,

Dir auch. Bei mir heute Computer, morgen in die Berge.

Gruß
Olaf Schneider

[Der Martin]

Hallo,

Hm, dann ist mein IE5.5 unter Virtual PC auf Mac OS X vielleicht doch minimal anders gestrickt.

das mag durchaus sein - außerdem zeigen selbst die IE5.5-Versionen unter sich (Basis-Release, SP1, SP2) kleine, aber feine Unterschiede. Beispielsweise kommt der IE erst ab 5.5SP2 mit der HTTP-Antwort '204 No Content' klar. Durchaus möglich, dass auch in der Rendering Engine noch kleine Unterschiede stecken.

Dafür vermatscht der Firefox bei mir deine Bildunterschriften, ...
OK, erwischt. Das ist ein bekannter Fehler.

'tschuldigung, hab ich wieder genau die Stelle mit dem Fettfleck gefunden? ;-)

Schönes Wochenende noch,
Dir auch. Bei mir heute Computer, morgen in die Berge.

Bei mir wohl eher heute City Stroll (werd' in der nächsten halben Stunde aufbrechen), morgen Computer, sprich: Zeit fürs Hobby.

Ciao,
 Martin

[Gernot Back]

Hallo Olaf,

#broadImg2 {
    height: 407px;
    width: 928px;
}

  

> ~~~css
  

> #content img {  
>  border: 1px solid #B6BDC7;  
>  margin-top: 80px;  
> }  
> 

<div id="content">
    <img id="broadImg2" src="EGAL" alt="" />
    <h1>EGAL</h1>
</div>

  
In Wirklichkeit sieht dein Code aber so aus:  
  
~~~html
  
<img id="broadImg2" src="http://foto.olafschneider.de/pics/2006/helagsUndRogen/moorP.jpg" alt="" onclick="[code lang=javascript]location.href = &quot;http://foto.olafschneider.de/2006/helagsUndRogen/13&quot;;
~~~" /><h1>Am nächsten Tag  wurde das Wetter langsam wieder besser …</h1>  
[/code]  
  
Ich sehe nirgendwo, dass du deinem Image ein `display:block`{:.language-css} spendiert hättest, womit man üblicherweise alternativ neben dem Vermeiden von Whitespaces (Leerzeichen, Umbrüche im Quelltext) derlei Abstände im IE verhindern kann. Möglicherweise versucht das Inline-Image-Element im IE 5.5, sich an der Grundlinie des direkt benachbarten H1-Elements auszurichten, obwohl letzteres ein Blockelement ist.  
  
Die HTML-technisch maskierten doppelten Anführungszeichen innerhalb eines  Element-Attributs sind auch kurios, warum nimmst du stattdessen nicht einfach einfache Anführungsstriche?  
  
Gruß Gernot

[Olaf Schneider]

Hallo Olaf,

Hallo Gernot,

vielen Dank für Deine Antwort

In Wirklichkeit sieht dein Code aber so aus:

ich habe den Code verkürzt und die meiner Meinung nach irrelevanten Teile weggelassen.

Ich sehe nirgendwo, dass du deinem Image ein display:block spendiert hättest, womit man üblicherweise alternativ neben dem Vermeiden von Whitespaces (Leerzeichen, Umbrüche im Quelltext) derlei Abstände im IE verhindern kann. Möglicherweise versucht das Inline-Image-Element im IE 5.5, sich an der Grundlinie des direkt benachbarten H1-Elements auszurichten, obwohl letzteres ein Blockelement ist.

Hm, das könnte natürlich schon sein, obwohl ich dann immer noch nicht verstehe, wie die Lücke zwischen Bild und Rahmen entstehen kann. Tritt der Darstellungsfehler denn bei Dir auch auf? Martin konnte diesen nicht nachvollziehen.

Die HTML-technisch maskierten doppelten Anführungszeichen innerhalb eines  Element-Attributs sind auch kurios, warum nimmst du stattdessen nicht einfach einfache Anführungsstriche?

Bei Der nächsten Coderevision fliegt das onclick-Attribut ohnehin vollständig aus dem html heraus und fließt in die Javascriptdatei mit ein. Aber Du hast recht, es sieht schon ein bisschen seltsam aus und ich hatte keinen Grund, auf einfache Anführungszeichen zu verzichten.

Gruß
Olaf Schneider