"float" és "width: 100%"
Sziasztok!
Csak IE-ben áll fent a következő probléma: van monjuk egy 2 vagy 3 hasábos oldal, ahol a szélső hasábok float-tal vannak megoldva egy-egy div-ben. Amikor a középső, tartalom hasábban szeretnék egy 100% szélességű táblázatot megjeleníteni (tehát töltse ki azt teljes szélességében), a szélesség teljesen rendben, viszont az egész lecsúszik az oldalsó hasábok aljának szintjéig, mintha a "width: 100%" hatására azokat is belekalkulálná, pedig nem is érnek össze. FF, Opera jól jeleníti meg. Egyszerű példa:
Minden ötletet, tippet köszi előre is!
■ Csak IE-ben áll fent a következő probléma: van monjuk egy 2 vagy 3 hasábos oldal, ahol a szélső hasábok float-tal vannak megoldva egy-egy div-ben. Amikor a középső, tartalom hasábban szeretnék egy 100% szélességű táblázatot megjeleníteni (tehát töltse ki azt teljes szélességében), a szélesség teljesen rendben, viszont az egész lecsúszik az oldalsó hasábok aljának szintjéig, mintha a "width: 100%" hatására azokat is belekalkulálná, pedig nem is érnek össze. FF, Opera jól jeleníti meg. Egyszerű példa:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="float: right; width: 300px; border: solid 1px;">
<p>Content</p>
<p>Content</p>
<p>Content</p></div>
<div style="margin-right: 320px; border: solid 1px;">
<table style="width: 100%; border: solid 1px #a00;">
<tr><td>Nem jó helyen</td></tr></table>
<p>Content</p>
</div>
</body>
</html>
<html>
<body>
<div style="float: right; width: 300px; border: solid 1px;">
<p>Content</p>
<p>Content</p>
<p>Content</p></div>
<div style="margin-right: 320px; border: solid 1px;">
<table style="width: 100%; border: solid 1px #a00;">
<tr><td>Nem jó helyen</td></tr></table>
<p>Content</p>
</div>
</body>
</html>
Minden ötletet, tippet köszi előre is!
Ha megfelel
table style="width: 99.5%; border: solid 1px #a00;"
Igy az IE is oda teszi ahova az Opera meg FF
köszi a választ!
szabványos dolgok...
még egy dolog: ne transitional doctype-ot használj! ie csak akkor kezeli helyesen a doboz-modellt, ha strict doctype-ot adsz meg neki. további olvasnivaló
a border sorrendje pedig méret, stílus és szín. ki lehet hagyni az egyes részeket, de a sorrend akkor is marad (méret stílus szín, méret stílus, méret szín, stílus szín, méret, stílus, szín)
ezek nem feltétlenül javítanak az ie viselkedésén, de sokkal kevesebb problémád lesz, ha figyelsz az ilyen apróságokra.
sajna nem az igazi
a border sorrendre a mentségem, hogy ez egy hirtelen összedobott minta volt. :)
olvasgattam kicsit a témában (köszi a linkeket), ha jól értem, a böngészők eltérő doboz-modell kezelése miatt arra érdemes figyelni, hogy a border, a padding, és a width lehetőleg egy elemen belül ne forduljon elő.
visszatérve a példához, logikus lenne a megoldás, de sajna nem műxik border nélkül, strict-tel sem. hiába van ott a margin-right a második div-nél (ami ugye kell, különben egymásra lóg a két hasáb), a 100%-os szélesség azon belül is neki a teljes oldalt jelenti, miközben maga a táblázat nem lóg ki.
<html>
<body>
<div style="float: right; width: 300px; background-color: #F88;">
<p>Content</p>
<p>Content</p>
<p>Content</p></div>
<div style="background-color: #88F; margin-right: 320px;">
<table style="width: 100%; border: none;">
<tr><td>Nem jó helyen</td></tr></table>
<p>Content</p>
</div>
</body>
</html>
most már csak egy végső nagy kérdés: hogy szokás ezt megoldani, van rá valami trükk, vagy egyszerűen nem illik a 100%-os szélességet ilyen formában használni?
doboz-modell, link
nem erre szerettelek volna rávezetni. :] inkább a strict doctype használatára, mert - mint említettem is - strict doctype esetén ie6 is jól kezeli a doboz modellt.
találtam egy jó fórumtémát (legalábbis a címe az), igaz angol, de remélem segíteni fog, nekem nem volt időm végigolvasni.
szerk: elolvastam, ők úgy oldották meg, hogy nem táblázatot használnak, úgyhogy kérdés, mit akarsz belerakni. ha nem táblázatos adatot, akkor ne használj táblázatot, ha mégis azt, akkor egyelőre nincs ötletem.
thx
a megoldás az lett végül, hogy fix szélességűre kellett vegyem a középső, tartalom hasábot, így már jól tájolja az abban elhelyezett 100% szélességű elemeket.