✔ Lücke mit wiederholendem Bild schließen

[WIK-Lars]

Jawoll, das stimmt natürlich. Aber nicht beim IE 6. Was mache ich da bloß?
Habe ich in diesem Fall keine andere Wahl als mit fixen Breitenangaben zu arbeiten?
Kann ich da vielleicht irgendwas mit Tabellen machen (nur für den IE 6), so dass man zumindest einen Kompromiß zwischen fix und flexibel hinbekommt?

 

[Maik]

Min-Width for Internet Explorer wird da weiterhelfen.

Zudem solltest du noch die absolute Positionierung der Klasse .topm_3 komplett aufheben, da diese ebenfalls beim Skalieren des Browserfensters im IE6 zu Darstellungsfehlern führt.

 

[WIK-Lars]

Hallo Maik,

danke für den Hinweis. Ich hatte den schon mal gesehen und irgendwie hatte es damals schon nicht damit geklappt.

Ich hab' jetzt nochmal nach bestem Wissen meinen Code überarbeitet. Wenn ich das jetzt so mit der width: XY% und min-widt:XYpx-Methode mache, wird mein Header bzw. dei waagerechte Menüleiste im IE 6 eben nur entsprechend der Prozentangabe dargestellt, also gar nicht mehr über die gesamte Breite, was mir ja auch logisch erscheint.

Zudem bleibt das Problem mit den gräßlichen Verschiebungen bei Verkleinerung des Browsers im IE 6. Es sieht also dann noch genauso aus, wie die Abbildung in meinem letzten Beitrag.

Ich sende im Anhang noch mal den kompletten Code mit Bilddateien. (War's beim letzten Mal eigentlich nicht komplett? Diesmal sollte alles drin sein!)

Besten Dank auf jeden Fall schon mal!

 

[Maik]

Hi,

dass sich der Header und die Menüleiste nicht mehr über die gesamte Fensterbreite erstrecken, liegt daran, dass du nun für diese Bereiche eine Breite von 90% festgelegt hast. Diese 90% stammen aus dem Workaround und sind exemplarisch zu verstehen, und somit keine verbindliche Vorgabe.

Zudem hast du den Workaround für den IE6 komplett vergessen, denn mit der relativen Breitenangabe und der min-width-Eigenschaft ist es nicht getan, da ja letztere vom IE <7 nicht unterstützt wird.

Also werf bitte einen Blick in den Quellcode der empfohlenen Seite, denn dort findest du die erforderlichen CSS- und HTML-Ergänzungen für den IE6.

Wenn diese im Quellcode eingearbeitet sind, bricht der IE den Header auch nicht mehr beim Verkleinern des Fensters um.

 

[WIK-Lars]

Zudem hast du den Workaround für den IE6 komplett vergessen, denn mit der relativen Breitenangabe und der min-width-Eigenschaft ist es nicht getan, da ja letztere vom IE <7 nicht unterstützt wird. .

Hallo Maik,

und ich dachte schon, genau das sei der Workaround ( hatte mich aber ehrlicherweise auch schon etwas gewundert ).

Also, ich bin den Quellcode jetzt durchgegangen. Wenn ich's richtig erkenne, ist das wesentlich am Workaround:

/* for all browsers that understand min-width */
.width {width:90%; min-width:400px;}
/* the bodge for IE6 browsers */
* html .minwidth {border-left:400px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-400px; position:relative; float:left; z-index:2;}

Ich habe das in meinen Quellcode eingepflegt. Wesentliche Veränderungen haben sich jedoch nicht eingestellt.
Habe ich da vielleicht noch etwas vom Grundprinzip des Workarounds nicht verstanden?

 

[Maik]

Hi,

hast du es, basierend auf deinem zuletzt angehängten Quellcode, so umgesetzt?

#header   {     
height: 15%;
border: 1px solid black;
position:relative;
width: 100%;
min-width: 850px;
white-space: nowrap; 
}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:850px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-850px; position:relative; float:left; z-index:2;}

<div id="header">
     <div class="minwidth">
          <div class="container">
               <div id="header-left">
                    <img class="headerstyle" src="bild_links.JPG" width="137" height="67" border="0" />
                    <img class="topm_1" src="topm_1.gif" alt="" height="67" width="229" border="0" />
               </div>
               <div id="header-right">
                    <img class ="topm_3" src="topm_3.gif" alt="" height="67" width="32" border="0" />
                    <img class="logo" src="logo_rechts.JPG" alt="" height="60" width="200" border="0" />
               </div>
               <div id="header-center">
                    &nbsp;
               </div>
          </div>
     </div>
</div>

Auf diese Weise funktioniert der Workaround bei mir im IE6 einwandfrei.

 

[WIK-Lars]

Hey Maik,

es fehlten tatsächlich noch einige der Anpassungen, die Du in Deinem letzten Posting dargestellt hast.

Supergeil, jetzt funktioniert es!! Puh, war ne schwere Geburt :suspekt: .

Hab' besten Dank! ! !