Thema geschlossen
Ergebnis 1 bis 3 von 3
  1. #1
    Neuer Benutzer Domzilla befindet sich auf einem aufstrebenden Ast
    Registriert seit
    08.07.2007
    Beiträge
    9
    Renommee-Modifikator
    0

    Standard Problem mit 3 div-Containern / IE

    Hi Zusammen!

    Ich habe ein kleines Problem mit 3 div-Containern und dem Internet Explorer:

    Ich habe auf einer Seite 3 div-Container nebeneinander; Links "#avmenu", in der Mitte "#content" und Rechts "#extras" (siehe css-Code).
    Wenn ich nun in "#avmenu" oder "#extras" Text einfüge, oder auch einfach nur leere Zeilenumbrüche mache verschiebt sich der inhalt von "#content" um die Anzahl der in "#avmenu" bzw. "#extras" gemachten Zeilenumbrüche nach unten. Es entsteht praktisch eine große Lücke in "#content". Dieses Phänomen tritt allerdings nur im IE auf, Firefox zeigt die Seite korrekt an.
    Kann mir jemand sagen, woran das liegt?

    mfg!

    HTML-Code:
    body {
    margin: 0 auto;
    padding: 0;
    font: 76% Verdana,Tahoma,Arial,sans-serif;
    background: #211d1e url(images/body_deg.gif) repeat-x
    }
    
    
    #wrap {
    background: #000000;
    color: #ffffff;
    border:  none;
    margin: 0 auto;
    width: 790px;
    }
    
    #header {
    clear: both;
    margin: 0px 0em 0px 0em;
    padding: 0;
    height: 75px;
    background-color: #000000;}
    
    #header h3 {
    width: 350px;
    margin: 0px 0px 0px 15px;
    float: left;
    }
    
    #header p {
    width: 500px;
    float: right;
    text-align: center;
    color: #a0a0a0;
    margin: 0px 0px 0px 0px;
    font-size: 0.8em;
    line-height: 1.2em;
    height: 35px;}
    
    
    
    #avmenu {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    }
    
    #avmenu ul {    
    list-style: none;
    width: 150px;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1em;
    }    
    
    #avmenu li {
    margin-bottom: 4px;
    }
    
    #avmenu li a {
    font-weight: bold;
    height: 20px;
    text-decoration: none;
    color: #fffff1;
    display: block;
    padding: 6px 0 0 10px;
    background: #67522c;
    border-left: 1px #846837 solid;
    }
        
        
    #avmenu li a:hover {
    background: #67522c;
    color: #fffff1;
    border-left: 4px #47381e solid;
    }
    
    .announce {
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 130px;
    color: #a8a8a8;
    background-color: #000000;
    line-height: 1.3em;
    }
    
    #extras {
    float: right;
    width: 150px;
    margin: 0 0 10px 0;
    font-size: 0.9em;
    line-height: 1.5em;
    }
    
    #extras p {
    margin: 0 0 1.5em 0;
    }
    
    #content {
    margin: 0em 160px 20px 160px;
    padding: 0 10px 0 10px;
    line-height: 1.6em;
    text-align: left;
    }
    
    #content h2 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    }
    
    #content img {
    padding: 0px;
    display:inline;
    }
    
    
    
    h3 {
    font-size: 1.3em;
    margin: 0 0 10px 0;
    }
    
    a {
    text-decoration: none;
    color: #b6952a;
    }
    
    a:hover {
    text-decoration: underline;
    color: #b6952a;
    }
    
    
    #footer {
    clear: both;
    margin: 0 auto;
    padding: 0px 0em 0px 0em;
    width: 790px;
    text-align: center;
    color: #808080;
    font-size: 0.9em;
    height: 244px;
    background: #211d1e url(images/pom_bas.jpg) no-repeat right;
    border: none;}
    
    #footer a {
    color: #808080;
    text-decoration: none;
    }
    
    #footer a:hover {
    text-decoration: underline;
    }
    
    .left {
    margin: 0px 7px 0px 5px;
    float: left;
    }
    
    .right {
    margin: 0px 7px 0px 5px;
    float: right;
    }
    
    .textright {
    text-align: right;
    }
    
    .center {
    text-align: center;
    }
    
    .small {
    font-size: 0.8em;
    }
    
    .bold {
    font-weight: bold;
    }
    
    .hide {
    display: none;
    }
    

  2. #2
    HTML-Guru Meilensteine
    koslowski ist zur Zeit noch ein unbeschriebenes Blatt Avatar von koslowski
    Registriert seit
    10.01.2008
    Ort
    Passau
    Beiträge
    516
    Renommee-Modifikator
    0

    Standard

    Hi,

    ohne den Quelltext dazu ist das schlecht zu sagen.

    Kann also nur sagen was mir an der CSS auffiel:

    Code:
    #avmenu  {
        clear:left;
        float:left;
         }
    
    clear vor float, das kapiere ich nicht.

    line-height immer ohne Masseinheit angeben, sonst kann es Vererbungsprobleme geben: nicht line-height:1.2em; sondern line-height:1.2;
    Dann ist es einfach ein Faktor, völlig ausreichend.

    Ich würde eher allen drei Containern eine feste Breite geben und alle drei links floaten lassen.

    In deinem Fall hat z.B. #content kein Layout für den IE, das kann zu Problemen bei der Darstellung im IE führen.
    Layout bekommst du z.B. durch die Angabe einer Breite oder einer Höhe (reicht bei Höhe schon height:1% ), allerdings nicht durch width/height:auto; da muss schon ein Wert genannt werden..

  3. #3
    Neuer Benutzer Domzilla befindet sich auf einem aufstrebenden Ast
    Registriert seit
    08.07.2007
    Beiträge
    9
    Renommee-Modifikator
    0

    Standard

    Vielen Dank!
    An dem fehlenden Layout von #content hat es gelegen!

    Jetzt klappt alles!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

Ähnliche Themen

  1. nicht definierbares problem
    Von spastikind91 im Forum PHP
    Antworten: 5
    Letzter Beitrag: 16.01.2008, 15:39
  2. Problem mit eigenem Template System
    Von Frank im Forum PHP
    Antworten: 10
    Letzter Beitrag: 26.04.2007, 19:54
  3. Problem bei Realisierung eines Zurück-Buttons in HTML
    Von Grammi im Forum HTML und XHTML
    Antworten: 3
    Letzter Beitrag: 23.05.2006, 18:29
  4. Antworten: 3
    Letzter Beitrag: 21.09.2005, 17:27
  5. Frame/Rahmen - Problem
    Von Mr_Bild im Forum HTML und XHTML
    Antworten: 2
    Letzter Beitrag: 06.07.2005, 16:20

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein