Eigenartige Interpretation des width-Argumentes (IE)

[Kabelsalat]

Der IE bezieht das width-Argument bei prozentualer Angabe scheinbar immer auf die komplette Fensterbreite und nicht auf das übergeordnete Element. Daher wird folgende Seite beim IE nicht korrekt dargestellt (Leider nicht sonderlich gut zu lesen, aber das Forum lässt keine Einrückungen zu :-( ):

<div class="content-box">
<div class="content-title">13.03.2005 .:. Weitere Bildergalerien</div>
<div class="content">
<table class="album-select-table">
<tr>
<td class="album-select-nav">
<a href="" class="album-select-nav-button">Übersicht</a>
<a href="" class="album-select-nav-button">Album</a>
<a href="" class="album-select-nav-button">Dia-Show</a>
</td>
<td class="album-select-description">Beschreibung...
</td>
</tr>
</table>
</div>
</div>

Noch Ausschnitte der betroffenen CSS-Datei:

.album-select-table {
width:100%;
border:0;
border-collapse:collapse;}

.album-select-nav {
width:25%;
border-right-style:solid;
border-right-width:2px;
border-color:#6274a3;
padding-top:10px;
padding-bottom:10px;
line-height:28px;
vertical-align:top;
text-align:right;
font-size:15px;
font-weight:bold;
background-color:yellow;}

Die Klasse "album-select-table" ordnet der Tabelle die Breite 100% zu. Das ist notwenig, damit nachher die prozentuale Breitenangabe der ersten Spalte möglich wird ("album-select-nav").

Firefox stellt alles korrekt dar (Um die Verhältnisse besser zu erkennen sind die einzelnen Bereiche farbig gekennzeichnet):

Der IE bezieht die Breitenangabe "width:100%" jedoch auf die komplette Bildschirm-Breite und nicht auf das übergeordnete Element:

Dadurch ist auch ein Scrollen unvermeidlich.

Habt ihr irgendwelche Ideen, wie ich auch den IE dazu bewegen kann das ganze richtig darzustellen? Ich habe auch die HTML-Angabe "width=100%" probiert, aber das kommt auf das Selbe heraus...

 

[Robbenmeister]

hast du mal "em" ausprobiert?

 

[Kabelsalat]

Danke für den Tipp, leider bringt das in diesem Fall nichts: Die Verwendung der prozentualen Angaben sorgt dafür, dass das gesamte Layout nahezu unabhängig von der Größe des Anzeige-Fensters bzw. der Auflösung wird. Auf jedem Rechner sieht die HP sinnvoll aus.

Die Verwendung von em bzw. ex sorgt jedoch wie die absolute Angabe in Pixeln oder Punkten... für eine totale Festlegung des Layouts, da diese Maßeinheiten entweder absolut sind (px, pt...) oder auf die Schrift bezogen sind (em, ex), die sich aber unabhängig von der Größe des Browser Fensters ist.

Hier nochmal der grobe Aufbau:

<------------------Browserfenster------------------>
<--20%--><-----------Rahmen----------><--20%--> #Die 20% beziehen sich auf die Fensterbreite

<---------------------Rahmen---------------------->
<-x-><---------------Textfeld---------------><-x-> # x ist durch das Attribut "margin" bestimmt.

<----------------------Textfeld---------------------->
<-------------------Tabelle (100%)-------------------> # Die Tabelle besitzt die selbe Größe wie das Textfeld
<-Spalte1 (25%)-><----------Spalte2 (75%)----------> # Die Tabelle ist wieder auf diese Weise aufgeteilt.

Firefox stellt das ganze wie gewünscht dar, also Folgendermaßen:

<-20% * Fensterbreite-><-x-><-Tabelle (100% * Textfeld)-><-x-><-20% * Fensterbreite->

Beim IE sieht es hingegen so aus:

<-20% * Fensterbreite-><-x-><-Tabelle (100% * Fensterbreite)-><-x-><-20% * Fensterbreite->

 

[Kabelsalat]

Teilweise habe ich das Problem gelöst:

Die Box, die oben zu sehen ist sitzt in der Mitte von der Seite und hat nach Links und Rechts 15% der Fensterbreite Abstand. Bisher habe ich diesen Abstand durch margin-left bzw. margin-right erreicht. In diesem Fall wird die prozentualle width-Angabe eines Elements innerhalb dieser Box bzw. deren HTML-Element unterschiedlich interpretiert. Wenn ich den Abstand jedoch durch die Attribute "position:absolute; left:15%; right:15%;" erreiche, wird das width-Argument innerhalb der Box von beiden Browser gleich und noch dazu in meinem Sinne interpretiert. Diese Lösung führt zwar noch einige Probleme mit, aber die lassen sich alle lösen, da diese keine Browser-Spezifischen Probleme sind...