CSS kérdés: td-ben div { overflow: auto } ie6 bug

 ( katazina | 2008. február 29., péntek - 14:44 )

Sziasztok!

Átnyálaztam google x-edik találatig szinte mindent, de sehol se találtam megoldást.
A problémám a köv:
van egy szimpla html oldal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="hu">
<head>
<title>cim</title>
<link rel="StyleSheet" type="text/css" href="css/media.css">
</head>
<body>
<table class="befog" cellpadding="0" cellspacing="0">
<tr class="vez">
<td colspan="2">
<table class="nyil">
<tr>
<td>xx</td>
<td>yy</td>
<td>cc</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr class="cim">
<td colspan="2">
<div class="cim">
<div class="fold"></div>
<div class="url">../</div>
</div>
</td>
</tr>
<tr>
<td class="dirlist">
<div class="method">
<ul>
<li>Műveletek</li>
<li>muv1</li>
<li>muv2</li>
<li>muv3</li>
<li>muvx</li>
</ul>
</div>
<div class="list">
hosszu szöveg
</div>
</td>
<td class="mappak">
<table class="mappa" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

és a hozzá tartozó css:
html { height: 100%; overflow: hidden; max-height: 100%; }
body {
margin: 0;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, Sans-serif;
overflow: hidden;
height: 100%;
max-height: 100%;
}

table {
font-size: 12px;
font-family: Arial, Verdana, Helvetica, Sans-serif;
margin: 0;
border-collapse: collapse;
}

ul, li {
list-style: none;
padding: 0 0 0 5px;
margin: 0 0 0 5px;
}

table.befog {
width: 100%;
height: 100%;
}

.befog td.dirlist {
width: 25%;
height: 100%;
background-color: #fff8eb;
vertical-align: top;
padding: 10px 5px 10px 0;
border-right: 1px solid #ffebc7;
}

.befog td.mappak {
width: 75%;
height: 100%;
border: 1px solid #ffebc7;
}

.befog tr.vez, .befog tr.vez td {
height: 35px;
background-color: #fff8eb;
}

.befog tr.cim, .befog tr.cim td {
height: 30px;
border: 1px solid #ffebc7;
}

div.cim {
padding: 0 0 0 10px;
font-weight: bold;
}

.cim div.fold {
width: 15px;
height: 13px;
float: left;
margin: 0 6px 0 0;
}

.dirlist div.method {
margin: 0 0 15px 0;
}

.dirlist div.list {
overflow: auto;
position: absolute;
top: 155px;
bottom:10px;
width: 25%;
}
.vez .nyil td {
width: 35px;
text-align: center;
}

a bal oldalon, ha a hosszú szöveg helyébe egy ténylegesen hosszú szöveg kerül, akkor firefox-ban is és ie7-ben is szépen megjelenik egy scrollbar a bal oldali td jobb oldalán és lehet lefele tekerni.
ie6-ban viszont igaz hogy megjelenik a scrollbar, viszont kifut a képernyőről. A scrollbar alja teljesen eltűnik és egyáltalán nem elérhető.
Valamint ie6 esetén a div-nél a width: 25%-ot se értelmezi túl jól, bár ezt sikerült megoldani
egy külön ie.css-ben:

div.list {
position: relative;
top: 0;
bottom: 10px;
width: 100%;
height: 100%;
overflow: auto;
}

a width: 100%, position: relative meghatározás mellett szépen kirakja jobb oldalra a scrollbart ahol firefox és ie7-alatt normálisan megjelenik, viszont még mindig fennáll a probléma, hogy a scrollbar kilóg a képernyőről.

Tud valaki erre megoldást?
Előre is köszi a válaszokat!

Hozzászólás megjelenítési lehetőségek

A választott hozzászólás megjelenítési mód a „Beállítás” gombbal rögzíthető.

table, tr, td tagok eleg furcsan mukodnek css szempontjabol.
pl. egy td-re nem lehet megcsinalni, hogy adsz neki max szelesseget, magassagot, es overflowolod a tartalmat.
ezert azt kell csinalni, hogy a td-n belul teszel pl. egy divet, annak adsz szelesseget, magassagot, es azt overflowolod.

Tyrael

épp az a lényeg hogy ne kelljen fix méreteket megadni, csakis %-ban lehet, mert teljesen dinamikusan kell tudnia mozogni az oldalon lévő részeknek, ezért is írtam table-lel nem divvel az egészet.

hiaba adsz meg %-ot, ha nem fer bele valami a td-be, akkor nagyobbra fogja huzni.
amugy diveknek is lehet ugyanugy %-ban megadni a meretet.

Tyrael

igen, csak ha egy div-nek megadom hogy height: 100%; ha üres a div, akkor a magassága 0 marad, és nem ér le az oldal aljáig.

ezt mire szántad?

3-at találhatsz :)

Szia, jól értem, hogy egy 25% széles bal oldali sávot akarsz kijelölni annak a "hosszú szövegnek"? Azért position:absolute, hogy az oldal méretétől függetlenül mindig ugyanott maradjon?

a hosszú szöveg egy felsorolás lenne, szóval szélességben bőven elég a 25%.
A position: absolute; a próbálgatások eredménye, relative-al nem működött, relative csak ie6 alatt eredményezett egy kis sikert :)
relative is jó lett volna, hiszen elgondolás szerint egy td-ben van és ahhoz kellene viszonyulnia, de valamiért
a böngészők mégse úgy gondolták, az absolute-ra viszont már jól reagáltak :)

itt van hogy mit szeretnék elérni:
http://g2space.extra.hu/layout/

firefox, ie7 alatt megtekinthető :) ie6 alatt pedig a scrollbar kicsúszik a képernyőről