DIV Breite bei übergroßem Inhalt (IE BUG)

Status
Nicht offen für weitere Antworten.
S

schamahn

Grünschnabel
Hi,

hat jemand für das folgende Problem einen Workaround:

<table width="100%">
<tr>
<td>

<div style="overflow:auto;width:100%">
<table width="3000">
<!--[irgendeininhalt]-->
</table>
</div>

</td>
<td width="200">[Leisten_inhalt]</td>
<tr>
</table>

Problem hier ist folgendes:
Das Div positioniert sich im IE richtig und hat
100% Breite, wenn es jedoch Inhalte mit übergroßer
Breite beinhaltet, wird es um die entsprechende Breite
vergrößert, trotz dem overflow:auto, weil der IE
rechnerisch die Seitenbreite auf den größten Inhalt
anpasst und somit width="100%" dann immernoch
zutrifft.

Firefox & Co zeigen es richtig an.

Kennt jemand hierfür einen Workaround ?
 
nein.
Die Tabelle ist viel breiter als der div, das ist gewollt.
Bei einem div kann der tag overflow:auto eingesetzt werden, dann
wird der "überstehende" Inhalt mit Scrollbars versehen.
Das funktioniert in der Theorie auch im IE, in der Praxis allerdings
nur, wenn der div eine fixe Breite hat, z.b <div style="width:800px">
nicht jedoch wenn er auf width="100%" gesetzt ist, dann rechnet
der IE nämlich die Breite der großen Tabelle als Breite des
Dokuments und skalliert den div auf 100%, eben dann auf 3000px und
das ist natürlich Käse.

Für dieses Problem brauche ich einen Workaround.
 
Hallo schamahn,

das Workaround ist eine PX-Weite für das (horizontal) scrollfähige DIV-Element und die verschachtelte Haupt-Tabelle.

Demo-Source:
Code: 
<html>
<head>
<title></title>

<style type="text/css">
<!--
table.main
{
width: 800px;
border: 1px solid #006699;
}

td.scroll
{
width: 600px;
height: 50px; /* optional */
border: 1px solid #006699;
/* IE SCROLLBARS */
scrollbar-base-color: #ffffff;
scrollbar-3d-light-color: #ffffff;
scrollbar-arrow-color: #006699;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #006699;
scrollbar-shadow-color: #006699;
scrollbar-track-color: #ffffff;
}

td.fix
{
width: 200px;
border: 1px solid #006699;
}
-->
</style>

</head>
<body>

<table class="main">
 <tr>
  <td class="scroll">

  <div style="overflow:auto;width:600px;height:50px;">
   <table width="3000">
    <tr>
     <td>scroll content starts here</td>
    </tr>
   </table>
  </div>

  </td><!-- td.scroll END -->

  <td class="fix">[Leisten_inhalt]</td>
 <tr>
</table>

</body>
</html>
Browsercheck: IE (5.5), Mozilla (1.6), NN (7.0), Opera (7.23)


greez, maik.l
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück