Grafik wird in <div> nicht angezeigt (IE)

thowe · 14.09.2009

Schönen gutenMorgen und tollen Wochenstart.

ich habe folgenden Seitenaufbau (ab <body>)

Code:

[COLOR=#000080]<body>[/COLOR]
[COLOR=#000080]<div id=[COLOR=#0000ff]"seite"[/COLOR]>[/COLOR]
  [COLOR=#000080]<div id=[COLOR=#0000ff]"kopf"[/COLOR]>[/COLOR]
    [COLOR=#000080]<div id=[COLOR=#0000ff]"logo"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR]
  [COLOR=#000080]</div>[/COLOR]
  [COLOR=#000080]<div id=[COLOR=#0000ff]"hauptteil"[/COLOR]>[/COLOR]
    [COLOR=#000080]<div id=[COLOR=#0000ff]"links"[/COLOR]>[/COLOR]Raum für den Inhalt von  id "links"[COLOR=#000080]</div>[/COLOR]
    [COLOR=#000080]<div id=[COLOR=#0000ff]"inhalt"[/COLOR]>[/COLOR]Raum für den Inhalt von  id "inhalt"[COLOR=#000080]</div>[/COLOR]
    [COLOR=#000080]<div id=[COLOR=#0000ff]"rechts"[/COLOR]>[/COLOR]Raum für den Inhalt von  id "rechts"[COLOR=#000080]</div>[/COLOR]
    [COLOR=#000080]<hr />[/COLOR]
  [COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]</body>[/COLOR]

sowie folgendes stylesheet:

HTML:

* {
   margin: 0;
   padding: 0;
}
html, body {
    height: 100%;
}
body {
    font: 100%/1.4 Verdana, sans-serif;
    background-color:#fff;

}
h2, h3, p {
    margin-bottom: 1em;
}
#seite {
    margin-top: 2%;
    min-height: 100%;
    background-color:#005b94;

}
#kopf {
    text-align:center;
    background:url(../images/bg.gif);
    height: 156px;}
#logo {
    width: 864px;
    height: 138px;
    text-align:center;
    background:url(../images/headerdruck-bg.gif);
       /* ab hier zentrieren */

    position:absolute;
       left: 50%;
       margin-left: -432px;    
}
#hauptteil {
    background-color:#D4DFFF;
}
#links, #rechts, {
    font-size: 80%;
    width: 20%;
}
#inhalt {
    width: 59%;
    margin-left: 1%;
}
#links, #inhalt {
    float:left;
}
#rechts {
    float: right;
}
/* Trennlinie als unsichtbares Clear umschließt die Floats */
hr {
    clear:both;
    visibility:hidden;
}

NUN zum - erstaunlichen Problem:

Die Grafik in der Box "logo" (= ../images/headerdruck-bg.gif) wird nicht im Internetexplorer 8.0 angezeigt, auch nicht im Kompatibilitätsmodus. Das verstehe ich nicht. woran kann das liegen? die url Adresse muss stimmen, sonst würde mir das in DW und den anderen Browsern (Firefox 3.5 und Opera 10.0) nicht angzeigt werden.

Kann mir jemand helfen oder einen Tipp geben? Ich freue mcih über jeden Rat. >> Ich vermute, dass ich vielleicht mit z-index weiterkomme?

LG thowe

winne52 · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

versuche es mal ohne dem -(Sonderzeichen)

images/headerdruck_bg.gif

schöne Woche
winne52

HansHansa · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

Oder nehme einfach:

background-image:url([URI])

MyBad · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

Hallo!

Hat das einen Grund, dass #logo absolut positioniert ist? Denn um es zu zentrieren würde ich darauf verzichten und es mit margin: 0 auto; zentrieren.

Das die Grafik nicht angezeigt wird, liegt im IE meist daran, dass Umlaute vorhanden sind.

Gruß
Tim

Jormungand · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

Hm, ist jetzt mal nur geraten, aber du kannst mal versuchen dem Logocontainer nen z-index mitzugeben.
IE stellt mich auch immer vor Rätsel und ich versuchs durch Trial und Error...

thowe · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

*wow* danke für die vielen Antworten >> da geht die Post ab...

Ich denke mir das "Übel" wird mit

HTML:

position: absolute

augelöst.

Ich versuche nun den Weg über

HTML:

margin: 0 auto

und melde mich, ob es funktionert

bis dahin cioa

thowe · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

Ich stehe vor einem absoluten Rätsel, Alle gängigen Browser zeigen es an, wie es sein soll. NUR NICHT DER IE! *grml* Ich verstehe es nicht.

So ich stelle nun die beiden Grafiken zur Verfügung.

bg.gif:

logo.gif (umbenannt, vorher: headerdruck_bg.gif)

nun der html-code!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/basis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="seite">
  <div id="kopf">
    <div id="logo"></div>
  </div>
  <div id="hauptteil">
    <div id="links">Raum für den Inhalt von  id "links"</div>
    <div id="inhalt">Raum für den Inhalt von  id "inhalt"</div>
    <div id="rechts">Raum für den Inhalt von  id "rechts"</div>
    <hr />
  </div>
</div>
</body>
</html>

und nun die css-Anweisungen:

HTML:

@charset "utf-8";
/* CSS Document */
* {
   margin: 0;
   padding: 0;
}
html, body {
    height: 100%;
}
body {
    font: 100%/1.4 Verdana, sans-serif;
    background-color:#fff;
}
h2, h3, p {
    margin-bottom: 1em;
}
#seite {
    margin-top: 2%;
    min-height: 100%;
    background-color:#005b94;

}
#kopf {
    text-align:center;
    background:url(../images/bg.gif);
    height: 156px;
    z-index: 1;
    }
    
#logo {
    width: 864px;
    height: 138px;
    text-align:center;
    background-image:url(../images/logo.gif);
    margin: 0 auto;
    z-index: 2;
}
#hauptteil {
    background-color:#D4DFFF;
}
#links, #rechts, {
    font-size: 80%;
    width: 20%;
}
#inhalt {
    width: 59%;
    margin-left: 1%;
}
#links, #inhalt {
    float:left;
}
#rechts {
    float: right;
}
/* Trennlinie als unsichtbares Clear umschließt die Floats */
hr {
    clear:both;
    visibility:hidden;
}

Ich weiß viel Text.

ABER ich benötige wirklich eine Unterstützung, da ich schon vor einem Rätsel stehe. Also bitte, bitte.....

ciao

MyBad · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

Den z-index bei #kopf und #logo kannst du dir sparen.
Warum die Grafik allerdings immer noch nicht angezeigt wird kann ich mir nicht so wirklich erklären. Hast du mal gegooglet, ob der IE 8 irgendwelche Probleme bei der Darstellung von Bildern hat?

Eins fällt mir noch ein auch, wenn es bei gif eigentlich nicht geht!?:
- Hast du bei dem Bild eventuell CMYK eingestellt? Oder 300 dpi?

Pumble89 · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

margin:auto wird nicht gehen !!!

der ie 6 wurde ohne diesen schönen befehl erstellt bzw vor der zeit des css 1.2 glaub war des.

du musst daher versuchen entweder absolute pixel angaben zu machen , oder du lässt das div selber mit align center zentrieren bzw setzen.

sonderzeichen gehen schon , aber nur bedingt in solchen sachen.
ein weiteres prob wird es , wenn du in einen link auf das div machen willst .

sprich <a href="#" ><div id...></div></a> denn auch da hat der ie wieder schöne probs.

MyBad · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

Pumble89 schrieb:
margin:auto wird nicht gehen !!!

der ie 6 wurde ohne diesen schönen befehl erstellt bzw vor der zeit des css 1.2 glaub war des.

du musst daher versuchen entweder absolute pixel angaben zu machen , oder du lässt das div selber mit align center zentrieren bzw setzen.

sonderzeichen gehen schon , aber nur bedingt in solchen sachen.
ein weiteres prob wird es , wenn du in einen link auf das div machen willst .

sprich <a href="#" ><div id...></div></a> denn auch da hat der ie wieder schöne probs.

Es geht um den IE 8 nicht 6! Und der IE 6 unterstützt sehr wohl auch margin: auto; Allerdings muss die Seite dazu 100% valide sein!

Tattoomaus78 · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

liegen die Grafiken tatsächlich in einem übergeordnet Ordern auf dem Server? wenn nein, dann lösche mal ../

weiterhin hast du die Grafik logo.gif hier als .jpg hochgeladen....Absicht? oder ist es im code ein Tippfehler und müsste es logo.jpg heißen?

bei mir läufts im IE8
(Grafiken liegen auf einer Ebene mit der index.html im Ordner images ->also in css ohne "../")

thowe · 14.09.2009

AW: Grafik wird in <div> nicht angezeigt (IE)

hallo,

also zuerst an EUCH ALLE *Wow&dongge* >> bin wirlich überascht wie ihr an die Sache rangeht. Ich bin in einigen Foren tätig, komme von einer ganz anderen Programmierecke und muß nun aufgrund unternehmensexpansion typo3 und css erlernen....

ABER so schnellen und tollen Support habe ich noch nie erlebt. Also wirklich ganz erhlich gemeintes großes DANKESCHÖN an euch.

Das Problem ist gelöst, es ist etwas triviales gewesen und hat nichts mit der Technik des Zentrierens (also unabhänig von css)zu tun. Die Grafikdatei war beschädigt!

Der Hinweis von von Tattomaus78 das ich eine .jpg Dateil hochgeladen hatte, hat bei mir meine Ohrenklingeln lassen. Nachdem ich die Datei testete stellte ich fest, sie ist kaputt. So zum Glück gibt es Backup Dateien...

Danke auch für den Hinweis betreffend IE 6, werde nun eine eigene css-HACK Anordnung für IE schreiben. Wenn ich alles richtig verstanden habe, verursacht die proprietäre HasLayout Eigenschaft des IE`s einige Probleme. In meinem Fall wird wohl min-height nicht erkannt werden, und beim "zoomen" wird wohl auch die Grafik als Hintergrundbild vergrößert werden. Werde ich das wohl für html als auch für body in einen IE-Hack schreiben müssen.

NUN das wichtigste. Die Grafik wird auch im IE angezeigt, *wow*