[HTML/CSS] Browser Kompatibilitätsprobleme mit 'overflow'
Verfasst: 30.01.2007 23:14
Folgende Situtation:
Als Ersatz für iFrames und Framesets versuche Ich mit DIV's und der 'overflow' Eigenschaft bekannstes Verhalten nachzustellen. Dies funktioniert soweit einwandfrei doch wenn Ich versuche einere weitere Eigenschaft zu realisieren gibt es Kompatibilitätsprobleme zwischen InternetExplorer und Firefox. Was Ich meine ist eine prozentuale Höhenangabe (100%) für den DIV tag und TABLE tag in dem er verschachtelt ist:
Merkwürdigerweise funktioniert dieser Code nur mit InternetExplorer. Firefox weigert sich strikt den TABLE zu verkleinern und überstehenden Inhalt mittels automatisch erscheinenden Scrollbars verfügbar zu machen.
Zum Verständniss:
- DIV mit TABLE und prozentualer Höhenangabe (beide TAG's):
InternetExplorer: Ja
Firefox: Nein
- DIV ohne TABLE und prozentualer Höhenangabe:
InternetExplorer: Ja
Firefox: Ja
- DIV mit TABLE und pixel-basierter Höhenangabe (beide TAG's):
InternetExplorer: Ja
Firefox: Ja
Klar ist das die Ursache des Problems im Hinzufügen des TABLE Elements liegt. Ich habe bereits einschlägige Internetseiten besucht mit dem Ergebniss das dieses Problem scheinbar unlösbar ist. Zumindest was Kompatibilität beider Browser angeht.
Dennoch, Ich poste hier in der Hoffung das mir einer von euch Webdesigner Freaks eventuell helfen könnte!
Als Ersatz für iFrames und Framesets versuche Ich mit DIV's und der 'overflow' Eigenschaft bekannstes Verhalten nachzustellen. Dies funktioniert soweit einwandfrei doch wenn Ich versuche einere weitere Eigenschaft zu realisieren gibt es Kompatibilitätsprobleme zwischen InternetExplorer und Firefox. Was Ich meine ist eine prozentuale Höhenangabe (100%) für den DIV tag und TABLE tag in dem er verschachtelt ist:
Code: Alles auswählen
<style>
div#content {
overflow: auto;
height: 100%;
}
body,td,th {
font-family: Verdana;
color: #FFFFFF;
font-size: 12px;
}
</style>
<table width="400" height="100%" border="0" align="center" cellpadding="5" cellspacing="3" bgcolor="#6895D7" class="ta">
<tr>
<td height="20" bgcolor="#6895D7"><strong>CAPTION</strong></td>
</tr>
<tr>
<td bgcolor="#80A8E6">
<div id="content">
THIS IS A TEST LINE! [#1]<br><br><br><br>
THIS IS A TEST LINE! [#2]<br><br><br><br>
THIS IS A TEST LINE! [#3]<br><br><br><br>
THIS IS A TEST LINE! [#4]<br><br><br><br>
THIS IS A TEST LINE! [#5]<br><br><br><br>
THIS IS A TEST LINE! [#6]<br><br><br><br>
THIS IS A TEST LINE! [#7]<br><br><br><br>
THIS IS A TEST LINE! [#8]<br><br><br><br>
THIS IS A TEST LINE! [#9]<br><br><br><br>
</div>
</td>
</tr>
</table>
Zum Verständniss:
- DIV mit TABLE und prozentualer Höhenangabe (beide TAG's):
InternetExplorer: Ja
Firefox: Nein
- DIV ohne TABLE und prozentualer Höhenangabe:
InternetExplorer: Ja
Firefox: Ja
- DIV mit TABLE und pixel-basierter Höhenangabe (beide TAG's):
InternetExplorer: Ja
Firefox: Ja
Klar ist das die Ursache des Problems im Hinzufügen des TABLE Elements liegt. Ich habe bereits einschlägige Internetseiten besucht mit dem Ergebniss das dieses Problem scheinbar unlösbar ist. Zumindest was Kompatibilität beider Browser angeht.
Dennoch, Ich poste hier in der Hoffung das mir einer von euch Webdesigner Freaks eventuell helfen könnte!