nicht angemeldet
CSS Layout Probleme DIV Breite
Moin,
ich brech mir hier einen ab. Habe eine Seite, die ein 2 Spaltiges Layout hat. In der rechten Spalte ist eine weitere Tabelle auf 100%. Soweit so gut.
Nun möchte ich dort einen Div aufklappen, im IE sieht alles ok aus, der DIV geht auch auf 100% der Breite der Tabelle auf. Nur im Firefox nicht, da geht der DIV breiter auf (etwa um die Breite der linken Spalte).
Ich weiss nicht wie ich das noch lösen kann, feste Breiten will ich nicht setzen (nur für die linke Spalte) die rechte steht dann auf 100%.
Wo ist denn mein Denkfehler?
Hier mal n bischen Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4">
<div id='tools_div' style="width:100%; top:0px; position:absolute;z-index:0;display:none; padding:0px;">
<table cellspacing='0' cellpadding='0' border='0' width='100%'>
<tr>
<td class="tools_fenster_l"><img src="static/img/1x1.gif" alt="" width="10" height="10" border="0" /></td>
<td class="tools_fenster_m" style="padding-left:2px; padding-top:5px" valign="top" width='100%'/><!-- mitte oben rundung einf�gen --></td>
<td class="tools_fenster_r" ><img src="static/img/1x1.gif" alt="" width="10" height="10" border="0" /></td>
</tr>
<tr>
<td class="tools_table_background"></td>
<td class="tools_table_background" width="100%"><iframe name='tools_iframe' id='tools_iframe' frameborder="0" scrolling="No" style='width:100%; border:none; padding:0px;background-color:#636363;'"></iframe></td>
<td class="tools_table_background"></td>
</tr>
<tr>
<td class="tools_schatten" colspan="3"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Dieser DIV sollte doch nur um genau die Breite aufgehen wie die Tabelle breit ist in der er ist??
Danke schonmal
Oli
-
Moin Oli!
ich brech mir hier einen ab. Habe eine Seite, die ein 2 Spaltiges Layout hat. In der rechten Spalte ist eine weitere Tabelle auf 100%. Soweit so gut.
Nun möchte ich dort einen Div aufklappen, im IE sieht alles ok aus, der DIV geht auch auf 100% der Breite der Tabelle auf. Nur im Firefox nicht, da geht der DIV breiter auf (etwa um die Breite der linken Spalte).
Ich weiss nicht wie ich das noch lösen kann, feste Breiten will ich nicht setzen (nur für die linke Spalte) die rechte steht dann auf 100%.
Wo ist denn mein Denkfehler?
Hier mal n bischen Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4">
<div id='tools_div' style="width:100%; top:0px; position:absolute;z-index:0;display:none; padding:0px;">...
[schnipp]
...</table>
Dieser DIV sollte doch nur um genau die Breite aufgehen wie die Tabelle breit ist in der er ist??
Der IE verhält sich (mal wieder) nicht Standard konform. Der Punkt ist, dass du das DIV Element absolut positioniert hast, womit du es aus dem "normalen Fluss" nimmst. Bei Tabellen bin ich nicht so der Experte, da es da wiederum etliche browserabhängige "Besonderheiten" gibt, aber gib' der übergeordneten Tabelle mal ein
position: relative;.Gruß Gunther
-
Moin Oli!
Der IE verhält sich (mal wieder) nicht Standard konform. Der Punkt ist, dass du das DIV Element absolut positioniert hast, womit du es aus dem "normalen Fluss" nimmst. Bei Tabellen bin ich nicht so der Experte, da es da wiederum etliche browserabhängige "Besonderheiten" gibt, aber gib' der übergeordneten Tabelle mal ein
position: relative;.Gruß Gunther
danke für den Tipp, hat leider nix gebracht. Hab das ganze nun anders realisiert. Ich lese einfach per Javascript die Breite der Tabellenspalte aus, und setze die pixelgenau auf das div. Dummerweise gibt der IE keine werte zurück, aber da hab ich nen Fallback eingebaut das der dann halt 100% nimmt. :)
Funktioniert.
<script type="text/javascript">
{literal}
width = document.getElementById('assetTable').offsetWidth;
if(width == 0) {
width = '100%';
}
else {
width = width-27 + "px";
}
document.getElementById('tools_div').style.width = width;
{/literal}
</script>danke nochmal :)
Oli
-
Moin Oli!
Ich lese einfach per Javascript die Breite der Tabellenspalte aus, und setze die pixelgenau auf das div. Dummerweise gibt der IE keine werte zurück, aber da hab ich nen Fallback eingebaut das der dann halt 100% nimmt. :)
Funktioniert.
Und wie sieht der "Fallback" aus, wenn der jeweilige User kein JS hat, bzw. es deaktiviert hat?
Reine JS-Lösungen sind imho keine. Dein Problem lässt sich mit Sicherheit auch rein per CSS lösen. Achte mal darauf, dass sich von oben nach unten (Kaskade) durch alle betroffenen Elemente auch eine Breitenangabe durchzieht.
Gruß Gunther
-
Moin Oli!
Ich lese einfach per Javascript die Breite der Tabellenspalte aus, und setze die pixelgenau auf das div. Dummerweise gibt der IE keine werte zurück, aber da hab ich nen Fallback eingebaut das der dann halt 100% nimmt. :)
Funktioniert.
Und wie sieht der "Fallback" aus, wenn der jeweilige User kein JS hat, bzw. es deaktiviert hat?
Reine JS-Lösungen sind imho keine. Dein Problem lässt sich mit Sicherheit auch rein per CSS lösen. Achte mal darauf, dass sich von oben nach unten (Kaskade) durch alle betroffenen Elemente auch eine Breitenangabe durchzieht.
Gruß Gunther
Diese Seite funktioniert und soll auch nur mit Javascript funktionieren, da eh nur bestimmte Kunden darauf zugreifen können und der Rest der Seite schon intensiv Javascript / Ajax benutzt. Getestet hab ich das nun mit allen Browsern in "freier" Wildbahn (Safari, Opera, FF, IE) und nur der IE gibt bei der OffsetWidth keine Angabe zurück, und in diesem Fall setze ich das auf 100%, was dort auch funktioniert.
Breitenangaben ziehen sich durch alles durch, die Seite ist die 3te includierte eines Smartytemplates, also auch in den "oberen" Seiten ist alles korrekt. Vermute mal stark ein Problem des FF mit absolut positionierten und % angaben. Die Lösung ist zwar so recht "schmutzig", funktioniert aber zufriedenstellend und das ist das Wichtigste ;)
Dank dir nochmal für deine Hilfe,
Oliver
-
-
-