Raistlin: Darstellung funktioniert im IE nicht richtig

SELF-Forum

Darstellung funktioniert im IE nicht richtig

Raistlin
– Informationen zu den Bewertungsregeln

Hi!

Ich habe leider ein Probelm mit CSS: in allen Browsern (neueste Versionen) ausser dem Internet Explorer sieht mein Seitenlayout genauso aus wie ich es möchte. Das letzte "Inhalt" div mit float(right) ist genau dort wo es sein soll (unter dem Logo rechtsbündg). Nur IE macht es aus einem mir unbekannten Grund nicht. Beim IE liegt der "Inahlt" unter dem letzten links gefloatetem Listenelement. Ich habe es schon mit position versucht aber dann stellen es alle anderen Browser falsch dar.

Hier ist mal der Code:

  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  
<html>  
  
<head>  
  
<title></title>  
  
<meta name="description" content="Dieser Beschreibungstext soll einem Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">  
  
<meta name="author" content="">  
  
<meta name="date" content="2006-03-15">  
  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  
<meta http-equiv="expires" content="0">  
  
<style type="text/css"> /*Embedded Cascading Style Sheet*/  
  
  
  
  body {  
  
    color: black; background-color: white;  
  
    font-size: 100.01%;  
  
    font-family: Helvetica,Arial,sans-serif;  
  
    margin: 0; padding: 0;  
  
    text-align: left;  /* Zentrierung im Internet Explorer */  
  
    min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */  
  
  }  
  
  
  div#Seite {  
  
text-align: left;  
  
vertical-align: top;  
  
margin: 0 auto;  
  
width: 800px;  
  
padding: 0;  
  
background: #cccccc;  
  
border: 2px ridge silver;  
  
/*height: auto;* unnötig?*/  
  
overflow: hidden;  
  
  }  
  
  
  h1 {  
  
    font-size: 1.5em;  
  
    margin: 0; padding: 0.2em 0.2em 0.1em 0.2em;  
  
    text-align: left;  
  
    background: #ffffff;  
  
    border-bottom: 1px solid silver;  
  
  }  
  
  
  div#Navilogo {  
  
float:left;  
  
width:160px;  
  
height: 240px;  
  
margin: 0px;  
  
padding: 0px;  
  
  }  
  
  
  ul#Navigation {  
  
font-size: 0em;  
  
float: left;  
  
margin: 0px;  
  
padding: 0px;  
  
list-style: none outside;  
  
width:80px;  
  
height: 25px;  
  
border: 0px none;  
  
  }  
  
  
  
  div#Inhalt {  
  
margin: 0;  
  
padding: 0 1em;  
  
float:right;  
  
width:526px;  
  
background-color: #fefafa;  
  
  }  
  
  
  
  * html div#Inhalt {  
  
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */  
  
    margin-bottom: 0;  
  
  }  
  
  
  
  div#Inhalt h2 {  
  
    font-size: 1.2em;  
  
    margin: 0.2em 0;  
  
    color: black;  
  
  }  
  
  
  
  div#Inhalt p {  
  
    font-size: 1em;  
  
    margin: 1em 0;  
  
  }  
  
  
  p#Fusszeile {  
  
    clear: both;  
  
    font-size: 0.6em;  
  
    margin: 0; padding: 0.1em;  
  
    text-align: center;  
  
    background-color: #fefafa;  
  
    border-top: 1px solid silver;  
  
  }  
  
  
</style>  
  
</head>  
  
<body>  
  
  
<div id="Seite">  
  
  <h1><img src="logo.png" alt="Logo"></h1>  
  
  
  
  <div id="Navilogo">  
  
  <img src="navigation.png" width="160" height="240" alt="Navigation Logo" border="0">  
  
  </div>  
  
  
  <div>  
  
  <ul id="Navigation">  
  
  <li><img src="naviempty.png" alt="White Spacer" vspace="0" border="0" width="80" height="25" hspace="0" style="position:relative; left: 0px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="135" height="25" border="0" style="position:relative; left: -55px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="120" height="25" border="0" style="position:relative; left: -40px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="105" height="25" border="0" style="position:relative; left: -25px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="90" height="25" border="0" style="position:relative; left: -10px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="80" height="25" border="0" style="position:relative; left: 0px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="85" height="25" border="0" style="position:relative; left: -5px; top:0px;"></li>  
  
  <li><img src="menu.png" alt="Menu" vspace="0" hspace="0" width="90" height="25" border="0" style="position:relative; left: -10px; top:0px;"></li>  
  
  </ul>  
  
  </div>  
  
  
  
  <div id="Inhalt">  
  
<h2>BLIBLABLUB</h2>  
  
    <p>Blablablablablablablablablablablab lablablablablablablablabladfgdfgdddf  
  
      fgdfgdgdf </p>  
  
    <p>Bla</p>  
  
    <p>Blablablablablablablalbalbalblabla blblbalblablablablablabla lballlb ablabl  
  
      albl alb labl alb labl alb alb lab labl alb alb lab lab lablab lablbl blblab  
  
      lblalbl alalb lablabl abl albl ablablblabl blalbl ablabl ablabl labla balb  
  
      lblbal ll alblabl blalbl lblabl labl albl abl </p>  
  
    <p>albl abl allbl lbalblalb labl bl lbal blal blal bla lb fffgdfgdlabl a</p>  
  
    <p>bl albl alb lalablalb labla llbal alblalalb lab lbbalbalalb lblalb lbal  
  
      lbllarfgbalsfjkhglkjasfdhgc oahg lhg lshghsigs sofhg lshg sdupgf phiuspug  
  
      sfpgu psfug spidfug ppisugpi puspigu psufdpigpipusgp rtl ehglksrtlwnrlnrwl  
  
      nwelknf lwrlfnwrwjfigfubopi rp pksjfpg wrj pw pw pig jwr jpi gj wrjk&ouml;gj  
  
      lkwpg wrpj pjpwrjg wripj gpwij pj pwrijg pwrj wprij gpwrgpij pwrj pwirj  
  
      pijpijwrpigj pwrij piwrjpgj pijwrpi jwrpi jpi  
  
  </div>  
  
  
  <p id="Fusszeile">© 2006 Impressum</p>  
  
  
</div>  
  
</body>  
  
</html>

Ich wäre für jede Hilfe und Korrekturen sehr dankbar. Ich probiere da schon einige Stunden rum aber nichts funktioniert :(

Danke und bis dann,
Raist

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Darstellung funktioniert im IE nicht richtig

    Andreas Dölling
    – Informationen zu den Bewertungsregeln

    Hallo,

    hast du die Möglichkeit, das zum Anschauen mal ins Netz zu setzen?

    Mal so ins Blaue geraten: kann es sein, daß im IE die verfügbare Breite nicht reicht?
    Und: warum läßt Du eigentlich sowohl die Navigation als auch den Inhalt per float umfließen?

    Ciao,
    Andreas

    --
    "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Darstellung funktioniert im IE nicht richtig

      Raist
      – Informationen zu den Bewertungsregeln

      Hi!
      Danke für die schnellen Antworten. Ich den </p> Syntaxfehler korrigiert aber das hat nichts gebracht.

      hast du die Möglichkeit, das zum Anschauen mal ins Netz zu setzen?

      Nein, da ich leider noch keinen Homepagespace habe. Aber es geht doch wenn du dir den Code in einer html datei speichers und mit IE aufrufst. Dann sieht man den Fehler schon halt nur mit Platzhaltern.

      Mal so ins Blaue geraten: kann es sein, daß im IE die verfügbare Breite nicht reicht?

      Ja, das stimmt aber warum macht der IE die mittlere Liste nicht so breit wie ich das in pixeln angegeben habe? Alle andreren Browser schaffen das doch auch. Wie kann man das sonst noch machen oder das im IE korrigieren?
      Habe auch schon einen (div) um die Liste gestellt aber das ändert auch nichts.

      Und: warum läßt Du eigentlich sowohl die Navigation als auch den Inhalt per float umfließen?

      Weil ich sonst leider keine drei Spalten bekomme.

      Danke und bis bald,
      Raist

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Darstellung funktioniert im IE nicht richtig

        Raist
        – Informationen zu den Bewertungsregeln

        Hi!
        Habe es gelöst:) Also es liegt an der Liste! Ist anscheinend ein bekanntes Problem vom Internet Explorer.

        Hier habe ich auch noch einen workaround link für Listen im IE gefunden: www.positioniseverything.net/explorer/expandingboxbug.html

        Ich muss NUR im IE (sonst keinem Browser!) das overflow:hidden attribut für die Liste einsetzen.

        Es wird zwar im Internet Explorer wieder falsch wiedergegeben: Ich habe zwar negative positionen bei den listenelementen aber trotzdem verschwindet im IE nur der rechte Rand der Liste (warum weis nur Microsoft). Allen anderen Browser machen das wieder mal richtig :) (beide Seiten abgeschnitten).

        Es gibt die Möglichkeit NUR für Internet Explorer verständliche Befehle in den HTML BODY zu schreiben: Conditional Comments!

        So hat es für IE6 (sollte auch für Version 5 gehen) einwandfrei funktioniert (In den body geschrieben):

          
<!--[if gte IE 5]>  
  <style type="text/css">  
  div#NavigationDiv {  
  overflow:hidden;  
  }  
  </style>  
<![endif]-->

        Danke für Eure Hilfe,
        Raist

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Darstellung funktioniert im IE nicht richtig

          Auge
          – Informationen zu den Bewertungsregeln

          Hallo

          So hat es für IE6 (sollte auch für Version 5 gehen) einwandfrei funktioniert (In den body geschrieben):

          <!--[if gte IE 5]>
            <style type="text/css">
            div#NavigationDiv {
            overflow:hidden;
            }
            </style>
          <![endif]-->

            
Schreibe das mal in den `<head>`{:.language-html}. Im `<body>`{:.language-html} hat es nix zu suchen.  
  
Tschö, Auge  

-- 
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.  
(Victor Hugo)  
  
[Veranstaltungsdatenbank Vdb 0.1](http://termindbase.auge8472.de/)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Darstellung funktioniert im IE nicht richtig

    Thorsten F.
    – Informationen zu den Bewertungsregeln

    <p>

    bl albl alb lalablalb labla llbal alblalalb lab lbbalbalalb lblalb lbal

    lbllarfgbalsfjkhglkjasfdhgc oahg lhg lshghsigs sofhg lshg sdupgf phiuspug

    sfpgu psfug spidfug ppisugpi puspigu psufdpigpipusgp rtl ehglksrtlwnrlnrwl

    nwelknf lwrlfnwrwjfigfubopi rp pksjfpg wrj pw pw pig jwr jpi gj wrjk&ouml;gj

    lkwpg wrpj pjpwrjg wripj gpwij pj pwrijg pwrj wprij gpwrgpij pwrj pwirj

    pijpijwrpigj pwrij piwrjpgj pijwrpi jwrpi jpi

    </div>

    Liegt es vielleicht daran, dass der p-Tag nicht zugemacht wird?

    Gruß,
    Thorsten F.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln