Hintergrundfehler in div Element bei IE 5-7
0 
molily
1 
Gunnar Bittersmann
0 molily
Hintergrundfehler in div Element bei IE 5-7
Hallo Leute!
Ich habe das Problem mit der Box (rot umkreist)
http://hostaimg.ho.ohost.de/images/lhr11647.png
Der Hintergrund sollte mit einer Hintergrundfarbe ausgefüllt werden (die gleiche wie beim Text). Nur die Seite ist weiß. Die Box ist über dem text div element.
Bei ie5-6 wird die Box garnet erst angezeigt. Dafür ist hier aber die bg Farbe richtig.
Wie bekomme ich es hin, das die Box in allen IE Versionen angezeigt wird und im ie7 mit der richtigen farbe abschließt?
<!-- Anfang von #neu -->
<div id="neu">
<img src="Bilder/images_32_a.png" alt="">
<p><img src="Bilder/info_button.png" alt="Infobutton"> Herzlich Willkommen</p>
<img src="Bilder/images_32_b.png" alt="">
</div>
<!-- Ende von #neu -->
<!-- Anfang von #text -->
<div style="background-repeat:repeat-x; background-image:url(Bilder/images_41_a.png)" id="text">
<br>
<h1>Überschrift</h1>
<p>Hier steht mein Text</p>
<br class="clearfloat">
</div>
<!-- Ende von #text -->
.div #neu {
background-image: url(../Bilder/images_32.png);
min-height: 6px;
width: 237px;
float: left;
}
.div #text {
background: #3f5b7d;
height: auto;
min-height: 550px;
margin-top: -22px;
}
Mit freundlichen Grüßen
Pixelräuber
-
Hallo,
ich weiß nicht ganz, was du als korrekte Umsetzung dieses CSS ansiehst. Als Maßstab nehme ich mal die standardkonformen Firefox und IE 8. Da fließt der Text um die floatende Box herum.
Im IE 7 ist das nicht der Fall, weil deine Angabe min-height für #text den Modus »hasLayout« auslöst. Das ist eine IE-interne Eigenschaft von Elementen, die das Rendering bestimmt. Eine Wirkung davon ist, dass das Element sich nicht mit floatenden Elementen überlappt. Ein »Herumfließen« wird daher im IE 7 verhindert, das Element #text liegt komplett neben #neu.
Was du z.B. tun könntest:
- #neu in #text verschachteln
- min-height weglassen und nur für neuere Browser setzen. (Das wird schwierig, einen entsprechenden »Filter« zu finden, der den IE 7 ausschließt.)
Für den IE 6 musst du ein wenig tricksen. Ich habe einfach mal position:relative vergeben (damit lassen sich solche Probleme üblicherweise fixen) und schon tauchte das Element auf. Der IE 6 lässt sich auch einfacher ansprechen:
* html #neu { position: relative; }
IE 5.x kannst du getrost außen vor halten. Wahrscheinlich ist es sogar zuviel Aufwand, bei einer kleineren Site noch für den IE 6 zu optimieren. Dessen Nutzerzahlen sinken rapide.
Mathias
-
@@molily:
nuqneH
(Das wird schwierig, einen entsprechenden »Filter« […]
sprich: Selektor
[…] zu finden, der den IE 7 ausschließt.)
Wenn man nicht vergessen hat, die Sprache anzugeben (
<html lang="de">), dann geht es recht einfach:
html:lang(de) #text { min-height: 550px }Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
html:lang(de) #text { min-height: 550px }Merci, das muss ich mir merken.
Mathias
-
html:lang(de) #text { min-height: 550px }heißt das, ich kann die css eigentschaften auf deutsch schreiben?
z.B. höhe: 15px; ?????Danke für den Tip, ich werde versuchen, das neu zu verschachteln. Naja IE5 benutzt keiner da haste recht. Ich finde MS könnte die Bug fixes auch in ältere Browser einbauen. Das würde sehr viel arbeit sparen und ich denke die Webentwickler sind dann sicher froh drüber.
Mit freundlichen Grüßen
Pixelräuber
-
habe das mit dem schachteln gemacht. Es geht, nur hat ie5.5 und 6 kein bb. Dafür geht das sogar mit 5.5!! Echt geil!!
-
@@Pixelräuber:
nuqneH
html:lang(de) #text { min-height: 550px }
heißt das, ich kann die css eigentschaften auf deutsch schreiben?
z.B. höhe: 15px; ?????Witzbold?
Nein. '
html:lang(de) #text' selektiert das Element mit der ID "text", welches Nachfahre eines 'html'-Elements ist, für das die Textsprache Deutsch ist. [CSS2 §5.11.4]IE 7 versteht die Pseudoklasse '
:lang' nicht, deshalb wirkt die Regel im IE 7 nicht.Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-