✔ Kommt IE nicht mit width: 100% und overflow klar?

[rog2007]

Hallo Leute.

Ich hätte eine kurze Frage zum Thema CSS und IE6.

Ich möchte gern wie im angehangenen Bild einen horizontalen Scroll realisieren. Dieser soll unterhalb des Contentbereichs sein.

Dies habe ich wie folgt realisiert:

Innerhalb eines DIV mit den Eigenschaften:

div#main {
		width: 100%;
		height: 470px;
		overflow:auto;
}

Nun erkennt Opera und FF es ohne Probleme (Siehe Anhang opera.jpg), aber IE6 setzt die Scrollbar ganz unten am Ende des Fensters hin (Siehe Anhang ie.jpg).

Dasselbe mit width: auto;

Wenn ich nun width einen Pixelwert gebe (1000px o.ä.) dann setzt er die Scrollbar an die richtige Stelle. Aber dies kann ich nicht machen da das DIV in seiner Breite sich dem Browserfenster anpassen soll.

Hat jemand Erfahrung damit?


Danke und beste Grüße, rog

 

[Maik]

Hi,

bei mir interpretiert der IE6 das gezeigte Stylesheet wie gewünscht.

Zu Testzwecken habe ich mal diesen Quellcode angewendet:

<div id="main">
     <div style="width:2000px;">test</div>
</div>

 

[rog2007]

Hey Maik.

Danke für deine schnelle Antwort.

Genau. Da liegt ja das Problem. Wenn ich einen Pixelwert angebe haut es hin.

Aber das will ich ja nicht. Ich möchte gern width: auto; oder width: 100% verwenden. Denn es soll sich ja dynamisch dem Browserfenster anpassen.

Leider klappt also deine Lösung nicht wie ich sie benötige.

lg, rog

 

[Maik]

Das folgende "Konstrukt" führt bei mir zum selben Ergebnis:

<div id="main">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>

Stellt sich mir die Frage, was du da konkret in das DIV #main eingebettet hast, dass es breiter als der Anzeigebereich des umschliessenden DIVs ist?

 

[rog2007]

Ich hab es mal mit width: 2000px; probiert.
Selbst dann kommt die Scrollbar ganz unten.

OK. Hier mal die Syntax des Div:

<table width=100%>
<tr>
<td>

<div id="main">

<table width=100%>
<tr>
<td> ContenT </td>
</tr>
</table>

</div>

</td>
</tr>
<table>

mit dem div:

div#main {
		width: 100%;
		height: 470px;
		overflow:auto;
		}

so sieht es aus.


Mag wohl an den Tabellen liegen? Aber darauf bin ich angewiesen.

lg, rog

 

[Maik]

Soviel steht schon mal fest, dass es an der äußeren Tabelle liegt.

Und weshalb bist du auf die Tabellen angewiesen?

 

[rog2007]

Verdammt. Hatte gerade auf Erledigt anstatt Antworten geklickt .

Bin aus Zeitgründen darauf "angewiesen". Es sind so viele einzelne Elemente und mir fehlt ein wenig die Erfahrung mit CSS. Weiß aber das je mehr ich CSS einsetze ich auf die Macken der verschiedenen Browser achten muss.
Ich hatte gehofft es mit den guten alten Tabellen managen zu können.

Könnte ich dies irgendwie umsetzen das dieses Konstrukt so bestehen bleibt, aber es mit width: 100% und der Scrollbar an der richtigen stelle funktioniert?

lg, rog


edit:

Ich habe jetzt die Tabelle entfernt. War wirklich die bessere Lösung.

Danke für deinen Tipp. Er war ausschlaggebend

lg, rog

 

[Maik]

Hi,

genau das wollte ich dir eben auf deine gestrige Frage vorschlagen, wie sich das Problem im IE lösen lässt.