Avatar billede razmuz_dk Nybegynder
25. august 2006 - 16:47 Der er 3 kommentarer og
1 løsning

IE opfører sig anderledes ved tabeller inde i overflow: auto

Jeg har et problem. Følgende kode vises forkert i IE:
-----------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>test</title></head>
<body>
    <div class="content" style="height: 80px; overflow: auto; overflow-x: hidden; width: 200px;">
        <div style="background-color: red;">Test</div>
        <table style="width: 100%;">
            <tr><td style="text-align: right;">test1</td></tr>
            <tr><td>test2</td></tr>
            <tr><td>test3</td></tr>
            <tr><td>test4</td></tr>
            <tr><td>test5</td></tr>
            <tr><td>test6</td></tr>
        </table>
    </div>
</body>
</html>
-----------------------------------------------

For mig at se er det IE, der simpelthen ikke kan sætte de scroll-bars ordenligt? I Firefox og Opera ser det fint ud.

Jeg har forsøgt disable den horisontale scroller med overflow-x: hidden; men det resulterer i at man ikke kan se det hele af "test1"-teksten (i IE).

Hvordan løser jeg nemmest dette problem?
Avatar billede mclemens Nybegynder
25. august 2006 - 22:53 #1
Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>test</title></head>
<body>
    <div style="width:200px;position:relative;"><div class="content" style="height: 80px;overflow: auto;">
        <div style="background-color: red;width:100%;">Test</div>
        <table style="width: 100%;">
            <tr><td style="text-align: right;">test1</td></tr>
            <tr><td>test2</td></tr>
            <tr><td>test3</td></tr>
            <tr><td>test4</td></tr>
            <tr><td>test5</td></tr>
            <tr><td>test6</td></tr>
        </table>
    </div></div>
</body>
</html>



IE og Firefox er desværre ikke helt enige m.h.t. det scrollbar halløjsa - IE vil ikke reservere plads til scrolleren og laver som følge af dette bredden om til ca 217px incl. scroller, mens Firefox forstår hvad man vil og laver bredden til 200px incl.scrolleren ... men som sagt, man kan lave lidt fusk her, men det er ikke kønt :/












<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>test</title></head>
<body>
    <div style="width:200px;position:relative;height:80px;overflow:hidden;"><div class="content" style="width:200px;height: 80px;overflow: auto;">
        <div style="width:181px;"><div style="background-color: red;width:100%;">Test</div>
        <table style="width: 100%;">
            <tr><td style="text-align: right;">test1</td></tr>
            <tr><td>test2</td></tr>
            <tr><td>test3</td></tr>
            <tr><td>test4</td></tr>
            <tr><td>test5</td></tr>
            <tr><td>test6</td></tr>
        </table>
    </div></div></div>
</body>
</html>
Avatar billede mclemens Nybegynder
25. august 2006 - 22:56 #2
uhm, denne her er vist lidt pænere :D



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>test</title></head>
<body>
    <div class="content" style="width:200px;height: 80px;overflow:auto;">
        <div style="width:181px;"><div style="background-color: red;width:100%;">Test</div>
        <table style="width: 100%;">
            <tr><td style="text-align: right;">test1</td></tr>
            <tr><td>test2</td></tr>
            <tr><td>test3</td></tr>
            <tr><td>test4</td></tr>
            <tr><td>test5</td></tr>
            <tr><td>test6</td></tr>
        </table>
    </div></div></div>
</body>
</html>
Avatar billede razmuz_dk Nybegynder
28. august 2006 - 08:47 #3
Æv!

Nå, lad os håbe IE7 retter op på det! :)

Og tak for svaret.
Avatar billede mclemens Nybegynder
28. august 2006 - 09:36 #4
Jah, det ville nu være rart :o)
Velbekom, og tak for point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester