✔ Untermenue im IE und FF anders

[Necro_nomicon]

Hallo!

Nachdem ich den beim 3spaltigen Layout den mittleren Teil mit -26px nach oben verschieben musste, damit es keine Probleme mit der Hintergrundfarbe gibt*, ist nun beim FF das Untermenue unter den Strich positioniert und beim IE steht es oben (wo es sein soll.

*Problem waere, dass beim Untermenue der Hintergrund weiss ist und wenn die maximale Breite erreicht waere, dann es aussieht als wuerde eine Stufe nach oben gehen...

                     -----------------------------
bg=weiss         |    hintergrund vom body
--menue----------|

Das Untermenue ist 26px hoch, also genau so hoch, wie ich es nach oben verschoben habe in der Klasse "tabs".

Die einzelnen Untermenuepunkte sind nun die "tabs li". Die kann ich aber nicht mit postion: positionieren, weil dann die Untermenuepunkte uebereinander liegen (im .tabs ist bereits ein position: relative).

Warum verschieben sich nun die einzelnen Menuepunkte bei IE und FF, der Strich (border-bottom von tabs bleibt aber wo er sein soll)?

noch immer zu sehen unter:
http://www.allergico.at/infos.html

 

[Maik]

Moin,

FF zeigt mir die Untermenüs "in Höhe" der Hauptmenüpunkte, und nicht darunter an. Ursache ist der obere und untere negative Außenabstand für .tabs, der im Original-Menü http://www.cssplay.co.uk/menus/tab_overlap.html nicht existiert:

.tabs {padding:0px; margin:-20px -20px -20px -20px; list-style:none; height:26px; background:#FFFFFF; position:relative;  border-bottom-color:#999999; border-bottom-style:solid; border-bottom-width:1px;}

Wenn ich diese auf "0" setze, stimmt die vertikale Position des Untermenüs im FF.

Dass die Tabs beim Verkleinern der Fensterbreite in die nächste Zeile umbrechen, liegt "mal wieder" an der zu gering definierten Mindestbreite min-width für #wrapper - du hast da "950px"deklariert, korrekt wären aber "1086px".

Scheinbar hast du aus deinen vergangenen Themen, die sich schon umfassend mit der Mindestbreitenproblematik beschäftigt haben, keine Lehren geschlossen, als dass du noch immer nicht den Zusammenhang erkennst.

mfg Maik

 

[Necro_nomicon]

hm...wenn ich die -20 weggebe, dann habe ich aber immer noch oben jetzt 20 px Rand vom Hintergrund und beim FF ist auch der Strich nicht ganz unten.

Das Untermenu soll ja quasi ober dem Hintergrund sein..

Und es geht nicht um das Umbrechen der Tabs, sondern, dass die einzelnen Tabs unter dem Strich gelegen sind in einem Browser und beim anderen darueber...

(siehe abb.3: menue_aend.jpg)


Was ich mit oben und unten liegen gemeint habe:
menue_IE.jpg und menue_FF.jpg

Wie es jetzt nach der Aenderunge von dir aussieht:
menue_aend.jpg

PS: Das mit der Mindestbreite. Dazu hab ich ja gepostet, ob mir das jemand erklaeren koennte mit was es zusammenhaengt. Ich hatte nun das Bild verkleinert und dachte es passt, abgesehen davon waren die Menuepunkte auch gar nicht geplant und so waers egal gewesen...

Mein Problem liegt jetzt aber eigentlich bei dem Untermenue. Das ist das Menue ueber den Hintergrund setzen kann vom centerCol, damit nicht so eine Art Treppe entsteht mit der hintergrundfarbe aus dem body...

 

[Necro_nomicon]

zu Mindestbreite:
Ich habe mir das nun mal erneut komplett aufgezeichnet:

Wenn ich also leftCol 200px habe.
rightCol hat 200px.

centerCol soll max-width: von 550px haben.

Gebe ich also im #centerCol max-width:550px; an. Damit falls Monitor/Aufloesung groesser ist, nicht nur mehr eine Zeile da steht.

Wenn ich nun aber moechte, dass das Layout immer 100% vom Fenster ist und die rechte Spalte immer rechts bleibt. Dann gebe ich einfach gar keine max-width: im #wrapper an. Weil wenn ich die nun auf eine Zahl begrenze, dann bleibt die Darstellung ja auf diese Breite begrenzt.


Allerdings hab ich bei dem Beispiel ja die max-width im wrapper angeben und es funktioniert. Nur ich dachte, wenn ich maximal einen Seitenbereich von 950 px erreichen will, dann darf der centerCol eben auch nur eine bestimmte Breite haben.

Wenn ich aber will, dass das centerCol eine maximale Breite hat und die Seite eine maximale Breite hat (und dann rechts einfach der Platz halt frei bleibt aber einer gewissen Groesse, dann muesste ich im #wrapper eine min-width und im centerCol eine max-width angeben?

 

[Necro_nomicon]

hat sich erledigt. Hab einiges umstruktriert, das padding rausgenommen und auch beim centerCol das padding raus und dann die Abstaende und Hintergrundbilder veraendert.

jetzan funkt es...allerdings ist das rightCol halt jetzt nicht bis hinunter weiss, da es sich nach dem Inhalt richtet

edit:
auch das hab ich mit Umgestaltung nun erreicht. Einziges Problem, was ja schon mal da war und mit height:1% fuer IE geloest wurde ist, dass die Breiten wohl nicht wirklich stimmen, weil es im IE der Inhalt bissi runterrutscht, wenn das Fenster zu klein ist...

edit:
auch das ist geloest. Mal schaun ob es noch moeglich ist einen weissen Abstand zur rechten Spalten zu machen und dann passt alles.
edit: geloest