css background-color und IE

[Ellie]

Moin,

ich ärgere mich gerade mit css herum, ich bin da kein Profi sondern Newbie...

Also, ich habe einen mit "div style="position: absolute; blabla" angelegten Bereich, in dem ein weitere div-Bereich und via span mehrere Unterbereiche verschachtelt sind.

Lt. css4U sollte der Hintergrund auch im IE angezeigt werden, tut es aber nicht, sondern statt der Hintergrundfarbe ist es transparent. *fluch laut rum*

Das schaut dann ganz genau so aus:

<!-- Artikel-->
<div id="artikel" style="position: absolute; left: 160px; top: 0px; right: 190px; width:468px; background-color:#e1e1e1; min-height:220px; max-height:100%;">

<div style="position: absolute; left: 0px; top: 0px; right: 0px; width:128px; margin:10px 10px 10px 10px;">

<span>
<!-- Artikelbild -->
<img src="hint01.gif" width="120px" height="120px" border="1px" align="top"></img>
<p>+ vergrössern </p>
<!-- Bewertung + Druck-->
<p>X als PDF ausgeben </p>
<p>X Bewertung abgeben </p>
<p>X Bewertung(en) lesen </p>
</span>
</div>

<div style="position: absolute; left: 128px; top: 0px; right: 0px; width:205px; margin:0px 5px 0px 5px;">

<span>
<!-- Produktname-->
<h2>Produktname </h2>
<h1>genauere Artikelbezeichnung </h1>
<p>Hier kommt die Kurzbeschreibung rein </p>
<p>Für eine ausführliche Beschreibung *link* </p>
</span>
</div>

<div style="position: absolute; left: 355px; top: 0px; right: 0px; width:100px; margin:0px 5px 0px 5px;">

<span>
<!-- Artikelnummern und Verfügbarkeit-->
<p>Artikelnummer </p>
<p>Herstellernummer</p>
<p>Verfügbarkeit </p>
</span>

<br><br><br><br>

<span>
<!-- Preis-->
<h3>Preis alt</h3>
<h2>Preis neu</h2>
</span>

<span>
<!-- Warenkorb & Kasse-->
<h1>Warenkorb Anz. Kasse</h1>
</span>
</div>

</div>
<!-- Ende Artikel -->

Soderle, die entsprechende ID-Formatierung schaut so aus:

#artikel{
background-color:#e1e1e1;
color:black;
margin:5px 5px; 5px; 5px;
font:12px verdana, sans-serif;
text-align:top
text-align:left;
}
#artikel p{
color:black;
margin:5px 5px; 5px; 5px;
font: 9px verdana, sans-serif;
text-align:left;
}
#artikel h1{
color:black;
margin:5px 5px; 5px; 5px;
font: 12px verdana, sans-serif;
text-align:left;
text-align:bottom;
}
#artikel h2{
color:black;
margin:5px 5px; 5px; 5px;
font:bold 16px verdana, sans-serif;
text-align:left;
text-align:bottom;
}
#artikel h3{
color:#FF0000;
margin:5px 5px; 5px; 5px;
font:bold 14px verdana, sans-serif;
text-decoration:line-through;
text-align:bottom;
}

Jemand eine Idee, was ich da falsch gemacht habe? Lach, ich steig da nicht so ganz durch, was ich mir da zurechtwurste. Ich hau das übrigens händisch in den Editor rein.

[Ellie]

Moin,

die Lösung: Die Background-Angabe eines Div-Containers ist erst dann zu sehen, wenn er mit einem Inhalt gefüllt wird. Ein untergeordneter Div-Container wird als Füllung nicht akzeptiert und bleibt deshalb im IE nackisch = transparent.

LG,
Ellie

[Manuel]

Sorry, da bin ich wohl ein wenig spät dran...damit hatte ich damals auch mal zu kämpfen und ich hab mich auch immer gewundert, wo der Container denn nun hin ist...

Zum Quellcode: Wenn du es nach den neusten Regeln machen willst, also XHTML 1.X strict, dann musst du aber noch ein paar Dinge ändern

Beispiel: border="1" gibt es nicht mehr. Das muss nun alles direkt über CSS gemacht werden. Dazu definierst du dir einfach eine Klasse für diesen Bereich, in deinem Fall "artikel" und schreibst dann in CSS:

.artikel img
{
border: 1;
}

Wieso machst du dir oben eigentlich ein ID hin und danach dann ein style=...
Das was als style dort steht kann dann alles mit in Artikel, vorausgesetzt du verwendest Artikel nicht mehrmals, was du aber bei "id" eh nicht darfst. Diese sind einzigartig, Klassen dagegen darf man mehrmals verwenden.

Dann zu <img>:
Gab es in HTML überhaupt jemals ein schließendes Tag dafür? Ich glaube nicht. In XHTML ist dieses aber nun so: <img src="" alt="" />
Gleiches gilt für <br />.

Anstatt jedes Mal in CSS "verdana, sans-serif; " zu definieren, würde ich eine Überklasse "body" machen, die sich dann auf die gesamte Seite bezieht und immer diese Schriftarten verwendet. Das nennt sich Vererbung und somit sparst du dir eine Menge Quellcode und falls du sie mal ändern willst, musst du nur an einer Stelle was ändern.

So, genug "gemeckert". Hoffe ich konnte dir ein wenig weiter helfen?!

Lg,
Manuel

[Ellie]

Hallo Manuel,

besten Dank für die Hinweise. Das ist auch ein Kreuz, meine eigenen HPs habe ich so hingepfuscht, wie es am besten passt. Das soll sich ja nun mal ändern.

Ich muß mir mal die Vorgaben vom W3C anschauen, irgendwo steht das bei denen auf den Seiten, worauf man zu achten hat.

LG,
Ellie

[Manuel]

Okay, kein Problem. Am besten machst du das mit nem Validator. Der zeigt dann zwar meist erstmal 100000 Fehler an, aber dann verstehst du meist auch genau wann und wo was falsch war. Sonst einfach fragen, hab mich ja auch sehr lang damit auseinander gesetzt. Hab auch noch ne Menge Fehler auf der Seite, was aber daran liegt, dass sie so variabel ist und dadurch entstehen meist dann die Fehler...neue Beiträge usw.

Lg,
Manuel

[Ellie]

Hallo Manu,

ich komme voran, allerdings löse ich das aktuelle Problem doch mit einer einfachen Tabelle. Toll, ich habe gestern und heute versucht das zu lösen, mit ner Tabelle war das Thema in 10 Minuten erledigt.

Mit CSS alleine kriege ich das nicht hin und der display:table Befehl ist kaum kompatibel zu älteren Browsern.

LG,
Ellie

[Manuel]

Hast du vielleicht mal die Seite online, damit man sich mal anschauen kann, woran es denn genau hängt? Denn normalerweise kann man alles, was man mit einer Tabelle macht auch anders machen

Lg,
Manu

[Ellie]

Hi Manu,

derzeit nicht, ich schau mal. Hier qillt die Arbeitskiste über, seufz, ich muß mich da erst durchwühlen.

Ich hab die Krise bekommen:

Div Hauptcontainer, da drei div-Bereiche relative positioniert und eine Fußzeile relative reingehauen. Verändere ich nun die Mitte, weil sich da Texte ändern, dann wandert die Fußzeile nicht mit *grrrr* und das war mir dann echt zu doof. Oder ich bin zu doof.

Egal, jetzt ist das eine Tabelle mit drei Spalten und Fußzeile in einem einzigen absoulte div-container. Funzt und langt. Schont meine Nerven, lach.

LG,
Ellie

[Ellie]

Hallo,

ich lasse nicht locker, grummel. Immerhin passt es soweit, daß die Fußzeile nach unten rutscht, wenn sich die Inhalte der Länge nach verändern.

Nur, der Sausack (sorry :D) soll den gesamten Hintergrund färben und nicht nur die mit Inhalten gefüllten div-Bereiche.

Wie löse ich das? Die Höhe soll ja weiterhin variabel sein, deshalb kann ich da keinen festen Wert eingeben.

LG,
Ellie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title></title>

<style type="text/css">

.body{
background:#FFFFFF;
border:1px solid;
width: 800px;
margin-left:10%;
margin-right:10%;
margin-top:100px;
margin-bottom:50px;
}

.linkstable{
float:left;
width:180px;
background:#A80808;
border:1px solid;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}

.mittetable{
float:left;
width:400px;
background:#A80808;
border:1px solid;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}

.rechtstable{
float:left;
width:180px;
background:#A80808;
border:1px solid;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}
.fusstable{
float:left;
width:784px;
background:#A80808;
border:1px solid;
margin-left:5px;
margin-right:5px;
margin-top:0px;
margin-bottom:10px;
text-align:right;
}

</style>
</head>

<body bgcolor="#e1e1e1">

<div class="body">

<div class="linkstable">
test <br/>
test <br/>
test <br/>
test <br/>
</div>

<div class="mittetable">
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
</div>

<div class="rechtstable">
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
test <br/>
</div>

<div class="fusstable">
test
</div>

</div>

</body>
</html>

[Ellie]

Huhu,

ich hab´s dank tutorials.de, lach. Na, ich muß da im Fuß einen <br clear:both;> einfügen, dann geht es. Wenigstens im IE6 und Firefox.

Ich weiß nur nicht, warum. :shock:

LG,
Ellie :D

[Manuel]

Hi du!

Immer stellst du deine Fragen nachmittags wo ich keine Zeit hab...sorry

Warum: Clear:both hebt deine Formatierungsbefehle float: left und float: right auf. Solltest du nur einen davon verwenden, kannst du auch zum Beispiel Clear: left schreiben.

War es das, was du wissen wolltest?

Lg,
Manuel

[Ellie]

Hallo Manu,

entschuldige, lach, daß ich "fremdgehe", aber mir brannte das unter den Nägeln. Ich frage mich nur, warum mit dem clear-Befehl die Hintergrundfarge jetzt angezeigt wird.

Ein Buch mit sieben Siegeln, dieses CSS.

Ups, noch ein link den Takabo ganz nett fand: http://cssvault.com/

LG,
Ellie

[Manuel]

Hi Ellie!

Ich frage mich gerade eh, wo dein Fuß denn dann landet, wenn du diesen auch auf float:left setzt. Müsste ich wenn ich Zeit hab selbst mal ausprobieren, aber manchmal gibt es Dinge, die einfach nicht funktionieren...der Grund ist mir dafür dann meist auch unbekannt...siehe dazu das Forum im IE => Header...warum?! Stunden lang gesucht, alle CSS-Dateien durchforstet...

Soweit schauts nun aber schonmal gar nicht schlecht aus

Lg,
Manuel

[Ellie]

Hihi,

wo ich dich hier gerade habe. Kann frau mit CSS realisieren, daß nicht nur Text sondern auch background-images wechseln, quasi ein " function...get element... bla" mit JavaScript nur eben in CSS?

Es funzt ja immerhin, wenn ich die Textattribute via a und a:hover classe definiere, aaaber geit dat auch mit background-image?

Muss ich probieren... hmm, der will nicht. Mal gucken. Also, falls Du oder ein Anderer das weiß *büdde* sag es mir.

CSS ist wie Rätsel lösen, lach.

LG,
Ellie

[Manuel]

Hihi Ellie

Das mit dem Backgroundimage glaube ich funktioniert nur mit einem kleinen JS-Script...hatte es auf der alten Seite auch mal damit gemacht. War eigentlich gar nicht so schlecht und es stört ja auch nicht, wenn es nicht da ist für alle, die JS deaktiviert haben. Mit CSS meine ich, dass es nicht geht...aber vielleicht bei der Schriftklasse auch direkt den Hintergrund ändern? Würde ich einfach mal ausprobieren...

also in die a:hover-Klasse einfach noch background mit rein.

Sonst wüsste ich auch nicht, wie es sonst noch gehen könnte.

Lg,
Manuel