[CSS] IE non-quirksmode geeft horizontale scrollbar - Softwareontwikkeling

woensdag 1 augustus 2007 13:44

Acties:

Topicstarter

Ik heb last van een bekend probleem, namelijk dat IE in non-quirksmode bij een verticale scrollbar ook een horizontale scrollbar plaatst.

Voorbeeldje:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <style type="text/css">
#container1, #container2 {
    background-color: #CCC;
    padding: 5px;
    width: 240px;
    height: 50px;
    }
#container1 {
    overflow: auto;
    }
#container2 {
    overflow-y: auto;
    overflow-x: hidden;
    }
TABLE {
    background-color: green;
    width: 100%;
    }
 </style>
<body>

Overflow: auto;
<div id="container1">
    <table>
    <tr><td>1.1</td><td>1.2</td><td align="right">1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
    <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
    </table>
</div>
<br>

Overflow-y: auto; Overflow-x: hidden
<div id="container2">
    <table>
    <tr><td>1.1</td><td>1.2</td><td align="right">1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
    <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
    </table>
</div>

</body>
</html>

Als je dat in een html bestandje saved (kan helaas op het moment even niets online zetten) en je opent het in IE, dan zul je zien dat de eerste ook een horizontale scrollbar heeft en hoewel de tweede die niet heeft, is dit ook geen oplossing, omdat de content dan buiten beeld valt.

Als je boven de DOCTYPE  zet, en je opent 'm opnieuw in IE dan worden beide containers ineens wel goed weergegeven (zonder horizontale scrollbar).

Er is dus een oplossing voor, maar ik zou liever een oplossing hebben waarbij ik IE niet in quirksmode hoef te zetten. Helaas is dit (en de overflow-x:hidden - wat dus ook geen oplossing is) de enige oplossing die ik hier op GOT en met Google heb kunnen vinden.

woensdag 1 augustus 2007 14:13

Acties:

BtM909

Watch out Guys...

Je zou het kunnen oplossen door een IE only CSS gedeelte te gebruiken (conditional comments

), aangezien ik een hack weer te lelijk vind als oplossing

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 1 augustus 2007 14:46

Acties:

marty

Topicstarter

BtM909 schreef op woensdag 01 augustus 2007 @ 14:13:
Je zou het kunnen oplossen door een IE only CSS gedeelte te gebruiken (conditional comments ), aangezien ik een hack weer te lelijk vind als oplossing

da's nogal een open deur en dat doe ik bovendien al
ik snap niet precies wat ik met deze informatie moet mbt het probleem ....

donderdag 2 augustus 2007 09:00

Acties:

HawVer

marty schreef op woensdag 01 augustus 2007 @ 14:46:
[...]
da's nogal een open deur en dat doe ik bovendien al
ik snap niet precies wat ik met deze informatie moet mbt het probleem ....

Wat is precies je verwachting van dit topic? Als je het netjes implementeerd zoals het hoort krijg je in IE een 15 px overlay van je scrollbar. Dat is een gegeven feit waar je zonder hack niet omheen kunt. Tenzij je kiest voor een vaste breedte van je table. Breedte tabel ongeveer 15 pixel minder breed dan de container.

http://hawvie.deviantart.com/

vrijdag 3 augustus 2007 21:16

Acties:

marty

Topicstarter

HawVer schreef op donderdag 02 augustus 2007 @ 09:00:
[...]

Wat is precies je verwachting van dit topic? Als je het netjes implementeerd zoals het hoort krijg je in IE een 15 px overlay van je scrollbar. Dat is een gegeven feit waar je zonder hack niet omheen kunt.

Mijn verwachting van dit topic is dat er hopelijk iemand op reageert die zo'n hack weet

Tenzij je kiest voor een vaste breedte van je table. Breedte tabel ongeveer 15 pixel minder breed dan de container.

Dat is geen optie, want in de meeste gevallen is er geen sprake van een optie