[css] Overflow + tabel op 100% probleem

[bgever]

Na wat gezocht te hebben op google en GoT heb ik nergens een oplossing voor mijn overflow probleepje kunnen vinden.

Ter illustratie heb ik maar een voorbeeld van mijn probleem online gezet:
http://www.oikoyama.net/d...ot_overflow_probleem.html

Het gaat hier dus weer om een browser probleem, en ditmaal totaal onverwachts tussen Mozilla en IE.

Mijn probleem is als volgt:
Ik wil een DIV hebben, met daarin een tabel. Als de tabel groter wordt dan de DIV hoog is, moeten aan de zijkanten schuifbalken komen.
Niet moeilijk zou je zeggen, gewoon met overflow.

Máár, nu moet deze tabel zo breed mogelijk zijn, dus net zo breed als wat in de DIV past. Dus heb ik de tabel een breedte gegeven van 100%.
Alleen komt dan het volgende probleem naar boven:
In IE wordt de breedte van de tabel net zo breed als de DIV, waardoor de schuifbalken nog aan die 100% breedte worden geplakt waardoor het totaal dus boven de 100% komt, en de div te groot wordt om in het venster te passen waardoor er ook nog schuifbalken in het venster ontstaan. Dat is echter niet de bedoeling.
In Mozilla daarentegen gebeurd wel wat ik wil hebben, de DIV blijft 100% breed, de scrollbalk wordt als het ware aan de binnenkant van die 100% gezet, en de tabel wordt zo breed mogelijk over die DIV verspreid.

Het beste raad ik je aan om het voorbeeld te kijken en wat er gebeurd, in IE valt de overflow schuifbalken buiten het venster, en in Mozilla past alles binnen het venster.

Ik wil graag op een nette W3C valid manier het zelfde nabootsen in IE wat in mozilla gebeurd. Wie o wie kan mij helpen?

[edit]
Voor ik het vergeet, ik had al een mogelijke oplossing gevonden door de breedte van de tabel weg te halen en "border-collapse: separate;" te gebruiken. Het nadeel hieraan is, dat dit alleen in IE werkt...

[ Voor 7% gewijzigd door bgever op 07-08-2003 18:12 ]

[crisp]

Hoe scrollbars gerenderd worden is browser-afhankelijk, W3C laat zich er verder ook niet over uit of die buiten of binnen het overflow block geplaatst dienen te worden.
Hier is dus weinig aan te doen behalve door of 2 verschillende styles te gebruiken, of met een javascriptje pielen.
Het leuke van IE is ook dat zodra je een horizontale overflow hebt, je ook gratis een verticale scrollbar erbij krijgt

[Verwijderd]

offtopic:
Content-Type: text/xhtml

[bgever]

offtopic:
Quote: Content-Type: text/xhtml
Ahh, zie je wel. Dus tóch text/html. Daar zat ik dus echt al lange tijd over te wijfelen .

Maar er is dus geen goede work-around te vinden?

Iemand een idee wanneer Mozilla "border-collapse: separate;" zal ondersteunen, want anders gebruik ik dat gewoon, en hebben de mozilla aanhangers maar pech totdat Mozilla het wel ondersteund . Het is CSS2...

[rewind.]

Wat ik wel is heb gezien is een Javascript wat test wat voor browser je gebruikt en aan de hand daarvan de grote bepaald. misschien zoek je zoiets ?

gevonden check de source van: http://www.soldiersoflight.nl/index2.html

[ Voor 172% gewijzigd door rewind. op 08-08-2003 01:06 ]

[bgever]

Stoney187 schreef op 08 August 2003 @ 01:01:
Wat ik wel is heb gezien is een Javascript wat test wat voor browser je gebruikt en aan de hand daarvan de grote bepaald. misschien zoek je zoiets ?

Als ik dan toch een browser check doe, kan ik beter gewoon JS laten kiezen tussen twee stylesheets, want daarmee is dan ook het probleem opgelost.
Maar bedankt voor je bijdrage .

Het probleem is alleen dat alles in een erg dynamische pagina komt te staan. De pagina is namelijk een directory browser, die in een iframe staat en telkens als je op een nieuwe map klikt moet herladen. Dan wil ik niet afhankelijk zijn van slome client-side scripts. Ik heb dan liever pure XHTML en CSS want dat is sneller.

[bgever]

Jeeej! Na heel wat klooien met div's, margins, paddings, widths en ga zo maar door heb ik een work-around gevonden .
Hij is niet helemaal volmaakt, maar goed genoeg voor mijn doel.

Voor de verduidelijking:
Probleem: http://www.oikoyama.net/d...ot_overflow_probleem.html
Oplossing: http://www.oikoyama.net/d...t_overflow_oplossing.html

Work-around:
Ik heb een extra DIV in de DIV gezet die de overflow heeft. Deze geneste div heb ik een margin-right van 20px gegeven.
De tabel heeft nog steeds een width van 100%, maar heeft een margin-right van -20px gekregen. Als je dan het resultaat bekijkt, zie je dat in IE de schuifbalk nu wel in zicht is, en het belangrijkste: er geen horizontale schuifbalk is ontstaan... (dit was namelijk een groot probleem)
Drawback:
In Mozilla ziet het er ook goed uit, op één ding na. In mozulla is de breedte van de tabel 20px minder, waardoor deze zich niet helemaal 100% over de DIV verspreid. Dit vind ik zelf niet zo'n heel erg probleem, dus ik kan er mee leven.

Het doel is bereikt: een DIV met daarin een tabel van 100% die schuifbalken krijgt als de tabel groter wordt dan de div, maar daarbij geen horizontale schuifbalken krijgt.

Native oplossing:
Als mozilla wél de border-collapse zou ondersteunen zou dat de perfecte native CSS oplossing zijn. Jammergenoeg ondersteund Mozilla dit CSS2 element nog niet, maar wel interessant om dit te onthouden voor de toekomst .

[Nexopheus]

Cascading Stylesheet:

div{
       overflow:scroll; /* of auto */
}

[drm]

1. Hoe kom je er bij dat Mozilla de border-collapse niet goed zou snappen Doet 't prima, in zowel IE als Mozilla

2. Waarom gebruik je in vredesnaam nog steeds

code:

cellpadding="0" cellspacing="0"

[bgever]

drm schreef op 08 augustus 2003 @ 18:39:
1. Hoe kom je er bij dat Mozilla de border-collapse niet goed zou snappen Doet 't prima, in zowel IE als Mozilla

Krijg jij deze tabel dan wel over het hele venster (in de breedte) gespreid?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
    <title>Untiteled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    table{
        border: 1px solid black;
        border-collapse: separate;
        table-layout: fixed;
        border-spacing: 0px;
    }
    td{
        border: 1px solid black;
    }
    </style>
</head>
<body>
<table>
    <tr>
        <td>bla</td>
        <td>bla2</td>
        <td>bla3</td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla2</td>
        <td>bla3</td>
    </tr>
</table>
</body>
</html>

Ik iig niet met Mozilla Firebird...

2. Waarom gebruik je in vredesnaam nog steeds
[...]

Nou, probeer jij maar eens met IE en "border-spacing: 0px;" eens die lelijke ruimtes om de cellen weg te halen. Werkt perfect in Mozilla, maar ie wil niet meewerken... Zie: http://tom.me.uk/html-to-css/cellspacing.html
Daar staat btw wel een oplossing, maar laat ik nu net graag die border-collapse op seperate hebben.
Gebruik ter verduidelijking anders ff de code hierboven, waar ook dat voorbeeldje in verwerkt zit...