The Stell: IE: Der Hintergrund neben Float-DIVs spielt verrückt.

Hi Leute,
Ich habe eine Webseite mit lila Hintergrund geschrieben. In diesem lila <body> sind 4 Kinder, die unterenander stehen: #header, #menu (Navigation), #inhalt (Text und Bar) und #footer.

  
<body text="#000000" link="#000000" alink="#6404BB" vlink="#757575" bgcolor="#CEC8EA">  
<!-- Header und Menu -->  

#header und #inhalt einen weißen Hintergrund und zwei DIVs herum, die den Rand mit einem schönen Schwarzweißübergangshintergrund versehen und links und rechts ist ein margin erzeugen, damit links und rechts ein freier lila Streifen bleibt, auf dem sich das Augen ausruhen kann.

  
<div class="i-sw-left">  
 <div class="sw-right">  

In #inhalt gibt es zwei UnterDIVs: div#bar und div#text. div#bar habe ich mit 'float:right;' positioniert und ihm eine feste px-width verpasst. div#text umfließt div#bar und hat einen 'margin', der genau so breit wie div#bar ist. Dann habe ich unten noch ein 'clear:both;' mit dem Namen #inhalt div#text div#hack eingefügt. Genau so wie bei allen Spalten-CSSs.

  
  <div id="inhalt">  
   <div id="bar">
~~~ style: `#inhalt div#bar {width:175px;float:right;padding-bottom:10px;}`{:.language-css}  
~~~html
  
    <h1>  
     Lorem ipsum  
    </h1>  
    <div>  
     <div>  
      <div>  
       Liste  
      </div>  
     </div>  
    </div>  
    <h1>  
     Lorem ipsum  
    </h1>  
    <div>  
     <div>  
      <div>  
       Lorem ipsum  
      </div>  
     </div>  
    </div>  
   </div>  

In div#text gibt es ein 'include();'. Und wenn der Text diese include()-Datei weniger Inhalt als von div#bar hat, wird im MSIE (getestet mit der 6. Version) der lila Streifen links (der lila 'margin' von #inhalt) und der Schwarzweißhintergrund neben #inhalt weiß. Ich habe mich mit dem Problem herumgespielt und habe auch eine Lösung gefunden: * html #inhalt div#text div#hack {display:inline;}. div#hack ist das Element, in dem 'clear:both;' steht.

  
   <div id="text">  
    <h1>  
Lorem ipsum  
    </h1>  

Als ich auf einer Seite einer include()-Seite eine Liste erstellte, funzte es auf der Seite nicht mehr. Ich bin ratlos. Könnt ihr euch das mal anschauen:

STYLE zur Liste:

  
#inhalt div#text ul {  
    list-style:none;margin:5px 0 0 12px;display:inline-block;  
}  
#inhalt div#text ul li {  
    margin:5px 0;display:inline-block;width:272px;vertical-align:middle;  
}  
#inhalt div#text ul li a {  
    text-decoration:none;  
}  
#inhalt div#text ul li a img {  
    border:0;margin-right:5px;float:left;height:31px;width:23px;  
}  
#inhalt div#text ul#ku5 li a img {  
    border:1px solid #000000;  
}  

  
<ul>  
<li class="d1"><a><img>TEXT</a></li>  
<li class="d2"><a><img>TEXT</a></li>  
<li class="d1" id="l5"><a><img>TEXT</a></li>  
</ul>  
    <div id="hack">  
    </div>  
   </div>  
  </div>  
 </div>  
</div>  
<!-- Footer -->  

MFG
 -THE-
 STELL

  1. <div>
       <div>
        <div>
         <div>
          <div>
          </div>
         </div>
        </div>
        <div>
         <div>
          <div>
          </div>
         </div>
        </div>
       </div>
        </div>
       </div>
      </div>
    </div>
    </div>

    sorry dass ich jetzt nix wirklich sinnvolles beitrage - aber zu später stunde kann ich das wohl nicht mehr:

    HUIII!!!! eine div-suppe ;)
    du solltest ernsthaft dein html überdenken bevor du weitermachst

  2. Hi,

    In div#text gibt es ein 'include();'. Und wenn der Text diese include()-Datei weniger Inhalt als von div#bar hat, wird im MSIE (getestet mit der 6. Version) der lila Streifen links (der lila 'margin' von #inhalt) und der Schwarzweißhintergrund neben #inhalt weiß. [...] Als ich auf einer Seite einer include()-Seite eine Liste erstellte, funzte es auf der Seite nicht mehr.

    Hintergrund + verschwinden + Liste + Fehler = (in Englisch) Disappearing List-Background Bug

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
    1. Hintergrund + verschwinden + Liste + Fehler = (in Englisch) Disappearing List-Background Bug

      Lieber ChrisB,
      Danke für deinen Link. Ich habe hier alle Lösungsvorschläge ausprobiert (Auch diese, die der Autor schlecht findet), aber es nützt überhaupt nichts. Dieser weiße Balken ist immer noch nicht lila.

      lg
       -THE-
       STELL

      1. Hi,

        Danke für deinen Link. Ich habe hier alle Lösungsvorschläge ausprobiert (Auch diese, die der Autor schlecht findet), aber es nützt überhaupt nichts. Dieser weiße Balken ist immer noch nicht lila.

        Dann waere ein Online-Beispiel (valides HTML & CSS, ggf. auf's wesentliche gekuerzt) vllt. hilfreich.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
        1. Ich habe hier alle Lösungsvorschläge ausprobiert, aber es nützt überhaupt nichts. Dieser weiße Balken ist immer noch nicht lila.

          Dann waere ein Online-Beispiel (valides HTML & CSS, ggf. auf's wesentliche gekuerzt) vllt. hilfreich.

          Okay, poste ich gleich!

          lg

          1. Ein Online-Beispiel (valides HTML & CSS, ggf. auf's wesentliche gekuerzt) vllt. hilfreich.

            Okay, poste ich gleich!

            Hier sind die ONBES':
            Wie es nicht aussehen sollte, aber im IE6 aussieht.
            Wie es aussehen sollte, aber mit Liste nicht aussieht.

            Liebe Grüße.
             \\THE////
             \\STELL///

            1. Ein Online-Beispiel (valides HTML & CSS, ggf. auf's wesentliche gekuerzt) vllt. hilfreich.

              Hier sind die ONBES':
              Wie es nicht aussehen sollte, aber im IE6 aussieht.
              Wie es aussehen sollte, aber mit Liste nicht aussieht.

              Ich habe das Problem selbst gelöst.
              Es lag daran, das am Ende des div#text ein Text sein muss. Er darf aber in keinem Kind sein. Darum habe ich folgendes am Ende der Site eingebaut:

                
               <!--[if IE]>  
                &nbsp;  
               <![endif]-->  
              
              

              Ich hätte früher draufkommen müssen. Tut mir leid!

              lg
               ((THE))
               (STELL)