Anzeige

Grafik wird in <div> nicht angezeigt (IE)

Grafik wird in <div> nicht angezeigt (IE) | PSD-Tutorials.de

Erstellt von thowe, 14.09.2009.

  1. thowe

    thowe newbie

    Dabei seit:
    31.12.2007
    Beiträge:
    5
    Geschlecht:
    männlich
    Ort:
    Graz
    Software:
    Adobe bzw. vorher Macromedia
    Kameratyp:
    Xilim
    Grafik wird in <div> nicht angezeigt (IE)
    Schönen gutenMorgen und tollen Wochenstart.

    ich habe folgenden Seitenaufbau (ab <body>)

    Code (Text):
    1.  
    2. [COLOR=#000080]<body>[/COLOR]
    3. [COLOR=#000080]<div id=[COLOR=#0000ff]"seite"[/COLOR]>[/COLOR]
    4.   [COLOR=#000080]<div id=[COLOR=#0000ff]"kopf"[/COLOR]>[/COLOR]
    5.     [COLOR=#000080]<div id=[COLOR=#0000ff]"logo"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR]
    6.   [COLOR=#000080]</div>[/COLOR]
    7.   [COLOR=#000080]<div id=[COLOR=#0000ff]"hauptteil"[/COLOR]>[/COLOR]
    8.     [COLOR=#000080]<div id=[COLOR=#0000ff]"links"[/COLOR]>[/COLOR]Raum für den Inhalt von  id "links"[COLOR=#000080]</div>[/COLOR]
    9.     [COLOR=#000080]<div id=[COLOR=#0000ff]"inhalt"[/COLOR]>[/COLOR]Raum für den Inhalt von  id "inhalt"[COLOR=#000080]</div>[/COLOR]
    10.     [COLOR=#000080]<div id=[COLOR=#0000ff]"rechts"[/COLOR]>[/COLOR]Raum für den Inhalt von  id "rechts"[COLOR=#000080]</div>[/COLOR]
    11.     [COLOR=#000080]<hr />[/COLOR]
    12.   [COLOR=#000080]</div>[/COLOR]
    13. [COLOR=#000080]</div>[/COLOR]
    14. [COLOR=#000080]</body>[/COLOR]
    15.  
    sowie folgendes stylesheet:

    HTML:
    1.  
    2. * {
    3.    margin: 0;
    4.    padding: 0;
    5. }
    6. html, body {
    7.     height: 100%;
    8. }
    9. body {
    10.     font: 100%/1.4 Verdana, sans-serif;
    11.     background-color:#fff;
    12.  
    13. }
    14. h2, h3, p {
    15.     margin-bottom: 1em;
    16. }
    17. #seite {
    18.     margin-top: 2%;
    19.     min-height: 100%;
    20.     background-color:#005b94;
    21.  
    22. }
    23. #kopf {
    24.     text-align:center;
    25.     background:url(../images/bg.gif);
    26.     height: 156px;}
    27. #logo {
    28.     width: 864px;
    29.     height: 138px;
    30.     text-align:center;
    31.     background:url(../images/headerdruck-bg.gif);
    32.        /* ab hier zentrieren */
    33.  
    34.     position:absolute;
    35.        left: 50%;
    36.        margin-left: -432px;    
    37. }
    38. #hauptteil {
    39.     background-color:#D4DFFF;
    40. }
    41. #links, #rechts, {
    42.     font-size: 80%;
    43.     width: 20%;
    44. }
    45. #inhalt {
    46.     width: 59%;
    47.     margin-left: 1%;
    48. }
    49. #links, #inhalt {
    50.     float:left;
    51. }
    52. #rechts {
    53.     float: right;
    54. }
    55. /* Trennlinie als unsichtbares Clear umschließt die Floats */
    56. hr {
    57.     clear:both;
    58.     visibility:hidden;
    59. }
    60.  
    61.  

    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
     
    #1      
  2. winne52

    winne52 Webmaster

    Dabei seit:
    27.05.2009
    Beiträge:
    3.307
    Geschlecht:
    männlich
    Ort:
    auf Rügen
    Software:
    Adobe Master Collection CS5
    Kameratyp:
    Nikon D5100
    Grafik wird in <div> nicht angezeigt (IE)
    AW: Grafik wird in <div> nicht angezeigt (IE)

    versuche es mal ohne dem -(Sonderzeichen)

    images/headerdruck_bg.gif

    schöne Woche
    winne52
     
    #2      
  3. HansHansa

    HansHansa [Mod] Foto

    31
    Dabei seit:
    08.02.2008
    Beiträge:
    3.744
    Geschlecht:
    männlich
    Ort:
    Stutensee
    Software:
    GIMP | Hugin
    Kameratyp:
    EOS 60D, 500D, Fz28
    Grafik wird in <div> nicht angezeigt (IE)
    AW: Grafik wird in <div> nicht angezeigt (IE)

    Oder nehme einfach:

     
    #3      
  4. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Grafik wird in <div> nicht angezeigt (IE)
    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
     
    #4      
  5. Jormungand

    Jormungand VonAllemEtwas

    Dabei seit:
    23.09.2008
    Beiträge:
    737
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, C4D R 11.5
    Kameratyp:
    Nikon D5000
    Grafik wird in <div> nicht angezeigt (IE)
    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... :p
     
    #5      
  6. thowe

    thowe newbie

    Dabei seit:
    31.12.2007
    Beiträge:
    5
    Geschlecht:
    männlich
    Ort:
    Graz
    Software:
    Adobe bzw. vorher Macromedia
    Kameratyp:
    Xilim
    Grafik wird in <div> nicht angezeigt (IE)
    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:
    1. position: absolute
    augelöst.

    Ich versuche nun den Weg über

    HTML:
    1. margin: 0 auto
    und melde mich, ob es funktionert :)

    bis dahin cioa
     
    #6      
  7. thowe

    thowe newbie

    Dabei seit:
    31.12.2007
    Beiträge:
    5
    Geschlecht:
    männlich
    Ort:
    Graz
    Software:
    Adobe bzw. vorher Macromedia
    Kameratyp:
    Xilim
    Grafik wird in <div> nicht angezeigt (IE)
    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:

    Directupload.net - Dx2x3sb2g.gif

    [​IMG]


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

    Directupload.net - Da357layp.jpg

    [​IMG]


    nun der html-code!

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <link href="css/basis.css" rel="stylesheet" type="text/css" />
    7. </head>
    8. <div id="seite">
    9.   <div id="kopf">
    10.     <div id="logo"></div>
    11.   </div>
    12.   <div id="hauptteil">
    13.     <div id="links">Raum für den Inhalt von  id "links"</div>
    14.     <div id="inhalt">Raum für den Inhalt von  id "inhalt"</div>
    15.     <div id="rechts">Raum für den Inhalt von  id "rechts"</div>
    16.     <hr />
    17.   </div>
    18. </div>
    19. </body>
    20. </html>
    21.  
    22.  
    und nun die css-Anweisungen:

    HTML:
    1.  
    2.  
    3. @charset "utf-8";
    4. /* CSS Document */
    5. * {
    6.    margin: 0;
    7.    padding: 0;
    8. }
    9. html, body {
    10.     height: 100%;
    11. }
    12. body {
    13.     font: 100%/1.4 Verdana, sans-serif;
    14.     background-color:#fff;
    15. }
    16. h2, h3, p {
    17.     margin-bottom: 1em;
    18. }
    19. #seite {
    20.     margin-top: 2%;
    21.     min-height: 100%;
    22.     background-color:#005b94;
    23.  
    24. }
    25. #kopf {
    26.     text-align:center;
    27.     background:url(../images/bg.gif);
    28.     height: 156px;
    29.     z-index: 1;
    30.     }
    31.    
    32. #logo {
    33.     width: 864px;
    34.     height: 138px;
    35.     text-align:center;
    36.     background-image:url(../images/logo.gif);
    37.     margin: 0 auto;
    38.     z-index: 2;
    39. }
    40. #hauptteil {
    41.     background-color:#D4DFFF;
    42. }
    43. #links, #rechts, {
    44.     font-size: 80%;
    45.     width: 20%;
    46. }
    47. #inhalt {
    48.     width: 59%;
    49.     margin-left: 1%;
    50. }
    51. #links, #inhalt {
    52.     float:left;
    53. }
    54. #rechts {
    55.     float: right;
    56. }
    57. /* Trennlinie als unsichtbares Clear umschließt die Floats */
    58. hr {
    59.     clear:both;
    60.     visibility:hidden;
    61. }
    62.  
    63.  
    Ich weiß viel Text.

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

    ciao :)
     
    #7      
  8. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Grafik wird in <div> nicht angezeigt (IE)
    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?
     
    Zuletzt bearbeitet: 14.09.2009
    #8      
  9. Pumble89

    Pumble89 Coder

    Dabei seit:
    19.08.2008
    Beiträge:
    28
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    Software:
    PS 3
    Kameratyp:
    Dsrl Sony alpha 300
    Grafik wird in <div> nicht angezeigt (IE)
    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.
     
    #9      
  10. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Grafik wird in <div> nicht angezeigt (IE)
    AW: Grafik wird in <div> nicht angezeigt (IE)

    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!
     
    #10      
  11. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Grafik wird in <div> nicht angezeigt (IE)
    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 Unbenanntes Dokument
    (Grafiken liegen auf einer Ebene mit der index.html im Ordner images ->also in css ohne "../")
     
    #11      
  12. thowe

    thowe newbie

    Dabei seit:
    31.12.2007
    Beiträge:
    5
    Geschlecht:
    männlich
    Ort:
    Graz
    Software:
    Adobe bzw. vorher Macromedia
    Kameratyp:
    Xilim
    Grafik wird in <div> nicht angezeigt (IE)
    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*
     
    #12      
x
×
×