Darstellungs problem im IE

[Leave]

Guten Morgen,
ich mache mir zzt. ein eigenes Design. Natürlich wird es im Firefox einwandfrei angezeigt doch der IE macht da nicht mit.

Ich habe einen Inhaltsbreich definiert. Darin befinden sich eine Auswahlbox (DIV)(Float: left) und dann den eigendlichen Content(DIV).

Nun zu meinem Problem. Anscheind geht der IE in die nächste Zeile mit dem COntent, weil es mit der breite nicht hinhaut. Wenn ich nun aber den platz mache sieht es bei beiden nicht mehr gut aus. Sprich habe zu große Lücken. Der Contet hat nur den Platz den er brauch.

Nun habe ich es mit z-index probiert. Natürlich mit postition:relative; da er ja eine Postition brauch hab ich zumindest bei self-html gelesen.

Hoffe mir kann wer helfen.
lg Leave

 

[Efchen]

Wie ist der Link zur Seite?

 

[Leave]

Habs hinbekommen, habe
position: absolute;
und
left: 800px;
genutzt.

lg Rico

 

[Efchen]

Dein div#auswahl (was übrigens überflüssig ist, ul#Auswahl ist doch auch ein Block-Element und verhält sich genauso wie div#auswahl, außerdem gruppierst Du ja nichts mit div#auswahl) ist einfach zu breit.

Übrigens sind ids eindeutige Kennzeichner, die je Seite nur einmal vorkommen dürfen. Du verwendest die ID "content" aber mehrmals. Dann musst Du eine Klasse draus machen.

Das position:relative zusammen mit float ist übrigens auch überflüssig, beide widersprechen sich.

Installier Dir Firebug (Plugin für Firefox) und lass Dir das Layout anzeigen. Dann merkst Du, dass #auswahl und #content sich überschneiden, weil #auswahl einfach viel breiter ist, als nötig wäre.

Ich glaube nicht, dass position:absolute hier eine Lösung ist, zumal es nicht so aussieht, als wärest Du Dir völlig im Klaren darüber, was absolute Positionierung eigentlich bedeutet. Für Anfänger ist das nicht zu empfehlen und ich sehe hier auch keinen Grund dafür.

 

[Leave]

Dein div#auswahl (was übrigens überflüssig ist, ul#Auswahl ist doch auch ein Block-Element und verhält sich genauso wie div#auswahl, außerdem gruppierst Du ja nichts mit div#auswahl) ist einfach zu breit.

Übrigens sind ids eindeutige Kennzeichner, die je Seite nur einmal vorkommen dürfen. Du verwendest die ID "content" aber mehrmals. Dann musst Du eine Klasse draus machen.

Das position:relative zusammen mit float ist übrigens auch überflüssig, beide widersprechen sich.

Installier Dir Firebug (Plugin für Firefox) und lass Dir das Layout anzeigen. Dann merkst Du, dass #auswahl und #content sich überschneiden, weil #auswahl einfach viel breiter ist, als nötig wäre.

Ich glaube nicht, dass position:absolute hier eine Lösung ist, zumal es nicht so aussieht, als wärest Du Dir völlig im Klaren darüber, was absolute Positionierung eigentlich bedeutet. Für Anfänger ist das nicht zu empfehlen und ich sehe hier auch keinen Grund dafür.

Firebug hab ich. Ich weiß was absolute ist. Danke für die anmerkung mit id und klasse. werde ich sofort umsetzen. das mit dem überschneiden habe ich ja schon erwähnt.

Werde mal mich an die arbeit machen.

lg und Danke Leave

 

[Leave]

So habe nun alles rechtmäßig mit Class und ID geändert.
Habe das DIV entfert von Auswahl. Die Breite runtergestellt bis mindestens. Habe ein "padding-right" wenn ich das weg mache funktioniert es, nur es sieht dann aber nicht gut aus. "position:relative" + "z-index" kann ich auch vergessen wenn es nicht mit float hamoniert. Funktioniert auch nicht wenn ich es alleine im Content angebe.
Was nun?

lg Leave

 

[Efchen]

Da ist noch ein position:relative und ein z-index im div.content. Das ist überflüssig. Du positionierst es ja noch nichtmal. Nimmst es nur komplizierterweise aus dem Textfluss. Und das z-index brauchst Du auch nicht, weil sich da nichts überlappt bzw. auch nicht überlappen soll.

 

[Leave]

Da ist noch ein position:relative und ein z-index im div.content. Das ist überflüssig. Du positionierst es ja noch nichtmal. Nimmst es nur komplizierterweise aus dem Textfluss. Und das z-index brauchst Du auch nicht, weil sich da nichts überlappt bzw. auch nicht überlappen soll.

Ok, nur warum wird es nun immernoch so scheiße im IE angezeigt?

 

[Efchen]

Mir fällt eben auf, dass Dein #head das Tag <dir> hat. Soll wohl <div> sein, wobei ich mich frage, wenns doch eine Überschrift ist, warums nicht <h1> ist, zumal Du <h2> verwendest, aber kein <h1>, das ist semantisch unmöglich.

Mir fällt außerdem noch das überflüssige div.oben auf. Wozu ist das? Auch da steht nur ein Element drin. Bei den Elementen fällt mir außerdem auf, dass Du viele fixe Breiten vergibst. Möglicherweise hast Du Dich da irgendwo verrechnet, bei mir geht das irgendwie nicht auf. Das könnte evtl. auch stören. Es reicht doch, wenn das Elternelement, in dem Fall div#Inhalt, eine feste Breite bekommt. Die div.content bekommen dann ein margin-right in einer Breite, dass das ul#auswahl reinpasst (denn Block-Elemente dehnen sich ohne Angabe einer Breite ja auf 100% des Elternelements aus). So sollte es eigentlich gehen, zumindest hatte ich mit diesem klassischen Layout nie Probleme, nichtmal im IE6.

Erst:
ul#Menu (float left oder right, feste Breite)

Danach:
div#Content
margin-left (oder right): Breite des ul#Menu + Abstand

 

[Leave]

Hab mal die Größe überprüft und etwas gefunden was das problem war. nun konnte ich sogar die Abstände erhöhen und noch besser anpassen.

Thank You.

lg Leave

 

[Efchen]

Deswegen würde ich da ganz auf pixelgenaue Größen verzichten. Das wird auch zu unübersichtlich.

Gern geschehen. Weiterhin viel Erfolg,
-Efchen