[xhtml/css] Welke overflow-handeling gebruiken?

[Onbekend]

Ik heb hier een relevant stukje code:

HTML:

<div class="AccountBox">
    <form method="post" action="?">
        <table>
            <tr>
                <td>Account ID:</td>
                <td>2</td>
            </tr>   
            <tr>
                <td>Gebruikersnaam:</td>
                <td>testgebruiker</td>
            </tr>       
            <tr>
                <td>E-mailadres:</td>
                <td>[e-mail]</td>
            </tr>
        </table>
    </form>
</div>

En deze relevante css:

Cascading Stylesheet:

table {
    width:                  100%;
    margin:                 0px;
    padding:                0px;    
}

div.AccountBox {
    width:                  250px;
}

div {
    background-color:       #99CCCC;    
    border-style:           solid;
    border-width:           1px;    
    position:               relative;
    margin:             8px;
    padding:                0px;
}

Nu is het probleem dat het e-mailadres veel te lang is. Het gevolg is dat er een overflow ontstaat.
De breedte van de div aanpassen is geen optie omdat m'n hele lay-out in de soep loopt.
Ik wilde dan de overflow: property gebruiken, maar ik kom er niet uit.

Bij overflow: visible loopt de tekst over m'n div door. Dit is juist niet de bedoeling.
Bij overflow: hidden is van de tekst wat door zou lopen niet meer leesbaar. Ik wil de bezoeker niet verplichten om in de broncode zelf te kijken.
Bij overflow: scroll laat FF en IE (6.0) beide scrollbars zien, terwijl de verticale niet nodig is. Dit is lelijk omdat ik de kleuren van de scrollbar (in FF) niet kan aanpassen.
Bij overflow: auto geeft FF het gewenste resultaat, maar in IE moet je ook nog eens de verticale scrollbar verschuiven. Dat is ook vervelend.

Ik heb ook aan gedacht om overal een <input disabled> voor te gebruiken, en dan dat dezelfde kleur als de achtergrond te geven. Maar dat lijkt me niet echt een ideale oplossing.

Ik ben vast niet de enige met dit probleem, maar ik heb nergens iets gevonden waar ze dit probleem netjes oplossen. Heeft hier iemand nog een tip wat ik kan proberen ?

[Exe-cuter]

Misschien is de overflow-x en/of overflow-y iets voor jou ?
http://msdn.microsoft.com.../properties/overflowx.asp

[Onbekend]

Overflow-x / -y staat trouwens helemaal niet op w3schools.

Met Overflow-x bereik ik bijna wat ik wil. FF maakt de div groter zodat alle content er in past, maar IE past de grootte van de div niet aan waardoor de laatste regel onder de scrollbar verdwijnt.

[frickY]

Je kunt het e-mailadres ook in een title-attribuut in de TD zetten, zodat deze zichtbaar wordt wanneer je je muis erop houd (zoals een ALT van een afbeelding).

Anders zou ik

Cascading Stylesheet:

td {
  overflow: auto;
  overflow-y: hidden;
]

gebruiken

[crisp]

overflow-x en overflow-y zijn gedefinieerd in CSS3 en w3schools is een pruts-reference
punt met IE is dat scrollbars binnen de box gerendered worden ipv erbuiten, en ja dat zuigt.

[Exe-cuter]

Crisp, ik ben wel benieuwd naar je non-pruts references voor CSS. Zelf kijk ik zo nu en dan eens op w3schools voor een snel overzicht, maar als jij betere sites kent, dan ken ik ze graag

[crisp]

Exe-cuter schreef op woensdag 30 augustus 2006 @ 21:33:
Crisp, ik ben wel benieuwd naar je non-pruts references voor CSS. Zelf kijk ik zo nu en dan eens op w3schools voor een snel overzicht, maar als jij betere sites kent, dan ken ik ze graag

De developer sectie van mozilla is vrij goed (als je de informatie weet te vinden en hij compleet is ) en verder natuurlijk gewoon de specificaties op w3.org - wel erg technisch maar beter dan van de bron kan je niet krijgen natuurlijk

[Rowanov]

Kan het in dit geval niet zo zijn dat de scrollbar juist de verticale scrollbar veroorzaakt? Oftewel; defineer je ergens anders in je css een hoogte voor die cel, of voor alle cellen globaal?