Problem mit Darstellung im Safari-Browser

[Schnippel]

Hi Leute,

hab ein Problem mit der Darstellung folgender Internetseite im Safari-Browser:

http://www.beton-pflaster-reinigen.de/index.html

Der MAIN-Bereich wird nur zur Hälfte angezeigt.
Im IE und Firefox sieht man alles richtig.

Woran liegt dieser Fehler ?
Wie läßt sich dieser beheben?

[Thomas]

Mal in den blauen Dunst!

Nimm mal die margins für den main raus, gib dem main ein float:left;!
Unter Umständen musst Du container nochmal clearen.

Mich irritiert auch noch, dass die Spalten rechts und links vor dem main gestellt werden. Was aber, glaube ich am Framework von Contao liegt, aber das ist ein anderes Thema.

EDIT:
Es könnte auch reichen, einfach nur die margins zu entfernen. Jedenfalls hat eine erste Bearbeitung in Safari (Firebug lite) den main unter die rechte Spalte geschoben. Was aber auch an dem Inhalt der Spalte liegen kann.
Musst Du halt mal ein wenig testen.

[Schnippel]

Danke für Deine Hilfe...

Ich hab in der Zwischenzeit dem MAIN eine feste width-Angabe im CSS gegeben, da funktioniert es...

[Thomas]

Das ist aber nicht flexibel!
Was machst Du bei kleineren Browsern?

Das width:auto; war schon vernünftig. Aber die margins sind fehl am Platze. ^^

[Schnippel]

Ich hab da nur paddings drin, die die Innenabstand zum Rand bestimmen sollen.

Hab das mal mit width:auto; probiert, da ist das selbe Problem wieder, daß nur die Hälfte angezeigt wird.
Es ist aber nur im Safari so zu sehen.

Ich habe im BA für die linke Spalte eine Breite 190px, für die rechte Spalte 145 px eingestellt.
Sind das die Margins, die Du meinst?

[Thomas]

Doch hast Du!
Die kommen vom Contao-Framework

#main{margin-left:190px;margin-right:145px;}

Schau mal in den Quelltext der Seite, dort wirst Du sie im head-Bereich finden.

[Schnippel]

Das sind also dies Angaben

<style type="text/css" media="screen">
/* <![CDATA[ */
#wrapper{width:960px;margin:0 auto;}
#header{height:330px;}
#left{width:190px;}
#right{width:145px;}
#main{margin-left:190px;margin-right:145px;}
#footer{height:84px;}
/* ]]> */


Jetzt stellt sich für mich die Frage, wie bekomme ich die margin`s da raus.

In dem von mir extern erstellten CSS seht folgendes:

#main { background-color:#ffffff;
width:auto;
position:relative;
min-height:400px;
overflow:hidden;
padding-right:10px;
padding-top:8px;

}

#left { background-color:#ffffff;
padding-left:5px; }
#right { background-color:#ffffff;
padding-right:3px; }


Sollte ich da bei #left und #right jeweils margin:0px; eingeben?
Oder muß ich im BA irgendwo was einstellen?

[MBM]

Testweise
#main {
margin-left:0px !important;
margin-right:0px !important;
}