XHTMLforum - FF overflow Problem 3-spaltiges Layout

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - FF overflow Problem 3-spaltiges Layout (http://xhtmlforum.de/showthread.php?t=40937)

FF overflow Problem 3-spaltiges Layout

Hallo Leute,

ich möchte ein 3-spaltiges Layout(s.u. #navigation, #content, #meinmenu) umsetzen, wobei die 3 Spalten gleich hoch sein sollen (da mit HG-Farbe gefüllt).
Bei Überlauf, soll der entsprechende Container größer werden, und natürlich auch die beiden anderen Container (keine Scrollbalken).
Im IE funktioniert das einwandfrei, nur im Firefox wird bei fest definierter Höhe der Container in px der Überlauf abgeschnitten.
Bei Prozentangabe 100% zeigt er zwar den Überlauf an, allerdings ausserhalb des Containers, ausserdem ist der Container bei wenig Inhalt zu groß.

Ich hoffe mir kann jemand helfen, das zu lösen.

Bisher habe ich folgenden HTML-Code:

Code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Unbenanntes Dokument</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body class="aussen">

<div id="site">

        <div class="oben">

                <div class="header"><img src="images/header.jpg" /></div>

        </div>

        <div id="mitte">

          <div id="main">

            <div id="navigation">Inhalt von Navigation</div>

            <div id="content">irgendwelcher Content. Kann auch länger sein!   </div>

            <div id="meinmenu">personaliesierbarer Inhalt</div>

            </div>

        </div>  

        

        <div class="unten">

          <div class="footer">Uhrzeit, Druckenbutton, etc</div>

        </div>

        <div class="rest">

          <div class="rest-mitte"></div>

        </div>

</div>        

</body>

</html>

und folgendes CSS:

Code:

HTML, body {

        height: 100%;

}



BODY {

        margin: 0em;

        color: #000000;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 0.75em;

        height: 100%;

        text-align: center;

}



/* ####################

          Hauptlayout 

#####################*/



.site {

        width: 100%;

        height: 100%;

        text-align: center;

}



.oben {

        width: 100%;

        background: url(images/layout/tab-oben.gif);

        text-align: center;

}



.oben .header {

        width: 79.8em;

        height: 8.2em;

        margin: auto;

        background-color: #FF6600;

}



.oben .header IMG{

        width: 100%;

}



div#mitte {

        width: 100%;

        float: left;

        min-height: none;

        height: auto;

        overflow: visible;

        

}



div#main {

        width: 79.8em;

        margin: auto;

        height: 100%;

        overflow: visible;

}



div#navigation {

        width: 13.25em;

        height: 100%;

        min-height: 100%;

        background: #D7D7D7;

        overflow: visible;        

        float: left;

}



div#content {

        width: 53.3em;

        list-style: url(images/verlauf_kopf_fuss_leiste.jpg);

        background: #EBEBEB;

        height: 100%;

        min-height: 100%;

        overflow: visible;

        float: left;

}



div#meinmenu {

        width: 13.24em;

        height: 100%;

        min-height: 100%;

        background: #fafafa;

        float: left;

}



.unten {

        width: 100%;

        float: left;

        background: #D7D7D7;

}



.unten .footer {

        width: 79.8em;

        margin: auto;

        background: #FF6600;

}



.rest {

        width: 100%;

        height: auto;

        float: left;

        background: #EBEBEB;

}



.rest .rest-mitte {

        width: 79.8em;

        height: auto;

        margin: auto;

        background: #999999;

}



/* ##############

         Characters 

###############*/



.sectionheader {

        background-color: #4E4A49;

        color: White;

        text-transform: uppercase;

}



/* ##############

         Mein Menü 

###############*/



.mein_menu .menu{

        width: 100%;

}



.mein_menu .menu .sectionheader {

        padding-left: 8px;

}

Gruß, smartt

Schau dir dieses Beispiel an:
http://www.cssplay.co.uk/layouts/3cols.html
Damit kannst du gleichlange Spalten auch mit em-Breiten umsetzen.

Ansonsten gibt's da noch equal height columns.

Danke - Klappt!:shock: Darauf wär ich nie gekommen:?

ich musste leider gerade feststellen, das im IE die linke und die rechte Spalte zu klein werden (d.h. die mittlere Spalte wird zu groß), wenn man "Ansicht->Schriftart->größer" auswählt. Im Firefox funktioniert das wunderbar.

hier mein aktueller Quelltext

Code:

<div id="site">

        <div class="oben">

                <div class="header"><img src="mages/header.jpg" /></div>

        </div>

          <div id="main">

            <div id="content">

                <div id="navigation">Inhalt von Navigation</div>

                    <div id="meinmenu">personaliesierbarer Inhalt</div>

              <p>irgendwelcher Content. Kann auch länger sein! </p>

              <div class="clear"></div>

            </div>

            </div> 

        

        <div class="unten">

          <div class="footer">Uhrzeit, Druckenbutton, etc</div>

        </div>

        <div class="rest">

          <div class="rest-mitte"></div>

        </div>

</div>

und hier noch mein css

Code:

/* ####################

          Hauptlayout 

#####################*/



.site {

        width: 100%;

        height: 100%;

        text-align: center;

}



.oben {

        width: 100%;

        background: url(images/layout/tab-oben.gif);

        text-align: center;

}



.oben .header {

        width: 79.8em;

        height: 8.2em;

        margin: auto;

        background-color: #FF6600;

}



.oben .header IMG{

        width: 100%;

}



#main {

        width: 79.8em;

        margin: auto;

}



#content {

        position:relative;

        display: block;

        list-style: url(images/verlauf_kopf_fuss_leiste.jpg);

        background: #EBEBEB;

        overflow: visible;

        float: left;

        border-left: 13.25em solid #D7D7D7;        

        border-right: 13.25em solid #fafafa;        

}

* html #content {display:inline-block;}

/* * #content{ width: 79.8em;}*/



#navigation {

        position:relative;

        display: inline;

        width: 13.25em;

        margin-left: -13.25em;

        float: left;

}



* html #navigation {width:13.25em;}



#meinmenu {

        /*  ein hundertstel kleiner als navigation, weil manchmal Umbruch im IE*/

        position:relative;

        display: inline;        

        width: 13.24em;

        margin-right: -13.24em;        

        float: right;

}



.clear {clear:both;height:1px;overflow:hidden;}



.unten {

        width: 100%;

        float: left;

        background: #D7D7D7;

}



.unten .footer {

        width: 79.8em;

        margin: auto;

        background: #FF6600;

}



.rest {

        width: 100%;

        height: auto;

        float: left;

        background: #EBEBEB;

}



.rest .rest-mitte {

        width: 79.8em;

        height: auto;

        margin: auto;

        background: #999999;

}

woran liegt das nun wieder?

Gruß, smartt

Der IE hat einen Rundungsfehler.
Verwende
body {font-size:100.01%}
und setz die gewünschte Schriftgröße dann in den einzelnen Elementen.
http://css-technik.de/details/2/5/CSS-Browser-Bugs.htm

Welchen Doctype verwendest du? In deinen Codebeispielen fehlt er bisher ganz.

Du hast im HTML eine id="site", im CSS sprichst du aber eine Klasse .site an.

Willst du das header-Bild wirklich vom Browser skalieren lassen?

Die Schriftgröße ist nicht das Problem. Die margins von #content werden kleiner, bzw. rutschen links und rechts aus dem Browser, so das die mittlere Spalte zu groß ist und man den Text in #navigation und #meinmenu nicht komplett lesen kann.

im Moment verwende ich gar keinen Doctype, da ich einen Ansatz im Quirksmode getestet habe. Sollte ich wohl mal setzen.
Ja, die gesamte Site soll sich skalieren lassen - Barrierefreiheit. .site hab ich in #site geändert, stimmt. Hatte aber keine Auswirkungen

Danke und Gruß, smartt

Hast du' s ausprobiert?! Die Schriftgröße *ist* das Problem, da du mit em-Breiten arbeitest.

Und: ja, verwende einen Doctype!

hab die Schriftgröße im body jetzt auf 100,01% gesetzt. Der Erste Buchstabe des Textes in #navigation, bzw. der letzte in #meinmenu wird immer noch abgeschnitten. Doctype hab ich auf html 4.01 transitional gesetzt.

Gruß, smartt

Das Komma ist falsch.

Warum transitional? Mit oder ohne URI?
Wie wär's mit einem Link?

hier nochmal das gesamte css, hatte vorhin was weggelassen damits nicht so viel wird und weil ich dachte das es keine Rolle spielt:

Code:

HTML, body {

        height: 100%;

        margin:0px;

        padding:0px;

}



BODY {

        margin: 0em;

        color: #000000;

        font-family: Arial, Helvetica, sans-serif;

/*        enspricht  ==> font-size: 12px;

        hier müssen em angegeben werden, damit der IE skaliert

*/

        /*font-size: 0.75em;*/

        font-size:100.01%

        height: 100%;

        text-align: center;

}



/* * * * * * * * * * * * * * * * * * * * * * * *

        Umrechnung von px in em:

        (Basis vom body):

        

        12px = 1em

        

        Beispiel: 18px = 1.5em

        

 * * * * * * * * * * * * * * * * * * * * * * * */



DIV {

}



/* ####################

          Hauptlayout 

#####################*/



#site {

        width: 100%;

        height: 100%;

        text-align: center;

}



.oben {

        width: 100%;

        background: url(images/layout/tab-oben.gif);

        text-align: center;

}



.oben .header {

        width: 79.8em;

        height: 8.2em;

        margin: auto;

        background-color: #FF6600;

}



.oben .header IMG{

        width: 100%;

}



#main {

        width: 79.8em;

        margin: auto;

}



#content {

        position:relative;

        display: block;

        list-style: url(images/verlauf_kopf_fuss_leiste.jpg);

        background: #EBEBEB;

        overflow: visible;

        /*float: left;*/



        border-left: 13.25em solid #D7D7D7;        

        border-right: 13.24em solid #fafafa;        

}

* html #content {display:inline-block;}

/* * #content{ width: 79.8em;}*/



#navigation {

        position:relative;

        display: inline;

        width: 13.25em;

        margin-left: -13.25em;

        float: left;

}



/* * html #navigation {width:13.25em;}*/



#meinmenu {

        /*  ein hundertstel kleiner als navigation, weil manchmal Umbruch im IE*/

        position:relative;

        display: inline;        

        width: 13.24em;

        margin-right: -13.24em;        

        float: right;

}



.clear {clear:both;height:1px;overflow:hidden;}



.unten {

        width: 100%;

        float: left;

        background: #D7D7D7;

}



.unten .footer {

        width: 79.8em;

        margin: auto;

        background: #FF6600;

}



.rest {

        width: 100%;

        height: auto;

        float: left;

        background: #EBEBEB;

}



.rest .rest-mitte {

        width: 79.8em;

        height: auto;

        margin: auto;

        background: #999999;

}



/* ##############

         Schriften 

###############*/



.schrift_1{

        font-size: 120%;

        line-height: 180%;        

        font-weight: bold;

}



.schrift_2{

        font-size: 80%;

        line-height: 120%;        

}



/* ##############

         Characters 

###############*/



.sectionheader {

        background-color: #4E4A49;

        color: White;

        text-transform: uppercase;

}



/* ##############

         Mein Menü 

###############*/



.mein_menu .menu{

        width: 100%;

}



.mein_menu .menu .sectionheader {

        padding-left: 8px;

}

Gruß, smartt