position:fixed und width:100%

[molily]

Hallo,

Also position: fixed nimmt deine Navigation aus dem normalen Fluss heraus.

laut selfhtml heißt es allerdings:
fixed = absolute Positionierung, gemessen am Rand des Elternelements.

und dass elternelement ist hier body und 90% breit.

Da wirfst du zwei Sachen durcheinander:

Der Sinn der obigen Selfhtml-Aussage ist, dass sich die Werte der Eigenschaften top, bottom, left und right auf den Rand (den padding block) des Elternelements beziehen. Am W3C-CSS-Standard gemessen ist das zunächst einmal unwahr. Wahr ist, dass sie sich gemäß CSS auf den sogenannten Viewport beziehen, das ist faktisch die Breite des Bereichs, in dem die Webseite angezeigt wird.

Was den Prozentwert von width angeht: Der bezieht sich ebenfalls auf den Viewport. Width:100% heißt gemäß CSS also, dass die width-Breite des Elements der des Viewports entspricht. Damit nimmt das Element auf jeden Fall die komplette Fensterbreite ein. Die Gesamtbreite errechnet sich aus der width-Breite plus padding-left/padding-right, border-left-width/border-right-width und margin-left/margin-right. So kommt es, dass das Element inklusive Rahmen (links und rechts 1px) und Abstände (links und rechts je 5px) größer als der Viewport ist und dementsprechend unschön aus dem Fenster herausragt. Soweit zur Theorie - in der Praxis halten sich nur Mozilla und Opera 6 an den Standard, daher die scheinbar seltsame Darstellung. MSIE (6) bekommt das position:fixed nicht zu Gesicht und handelt nach den Regeln für position:static: width orientiert sich an der padding-Box des Elternelements. Opera 7 setzt das position:fixed zwar um, geht aber genauso vor wie bei position:static: width orientiert sich an der padding-Box des Elternelements.
Soviel zu den Hintergründen der verschiedenen Darstellungen. Wie es aussieht, ist es, zumindest was Mozilla und Opera 6 angeht, nicht möglich, sich in der Breite eines position:fixed-Bereiches auf die Breite von body zu beziehen.

Hinzu kommt, dass Opera den Randabstand von body über padding, nicht über margin realisiert. Dadurch kommt die zusätzliche Einrückung, welche sich durch padding:0 für body verhindern lässt. Somit ließe sich zumindest zwischen MSIE 6 und Opera 7 (und wahrscheinlich MSIE 5.x/Win) eine Gemeinsamkeit finden, vorausgesetzt, es ist derselbe Rendermodus im Spiel.

Wirklich weiterhelfen kann ich dir leider nicht, mir fällt auch kein eleganter und flexibler Workaround ein.

Mathias