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

Beitrag lesen

SELF-Forum

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

The Stell
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln