[moz] overflow: hidden bij display: tablecell - Softwareontwikkeling

dinsdag 11 november 2003 15:13

Acties:

Verwijderd

Topicstarter

het gaat om een toolbar waarbij ik icoontjes verander door een plaatje in een div met overflow: hidden te verschuiven.

De knopjes moeten naast elkaar dus heb ik ze een float: left gegeven (geen display: inline, want ze moeten vaste dimensies hebben)

als ik dit in mozilla bekijk gaat het fout: de divs komen met z'n allen buiten de toolbar.

als ik een display: table-cell meegeef werkt het wel, dit is een bekende oplossing om de float in alle browsers goed te krijgen

Alleen wil mozilla de overflow dan niet meer goed afhandelen, hij gedraagt zich als overflow: visible, dus alle content is zichtbaar, wat juist niet moest.

Een voor de hand liggende oplossing is toch weer plaatjes te gaan swappen, maar ik heb juist voor deze methode gekozen omdat alles dan een stuk overzichtelijker is, geen gepreload en niet vier aparte plaatjes voor elke button, dus dat wil ik liever niet.

dinsdag 11 november 2003 15:14

Acties:

drm

f0pc0dert

Kan je even een voorbeeldje laten zien?

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 11 november 2003 15:16

Acties:

crisp

Devver

Pixelated

heb je misschien een concreet voorbeeldje? Kan je niet met een sprite werken?

Intentionally left blank

dinsdag 11 november 2003 15:39

Acties:

Verwijderd

Topicstarter

effe een voorbeeldje gefixed:
http://www.rikkertkoppes....cases/jsobj/floattest.htm

dinsdag 11 november 2003 15:46

Acties:

bakakaizoku

ja

Ik zie niet zo snel het probleem met mozilla hier, ze staan netjes naast elkaar

rm -rf ~/.signature

dinsdag 11 november 2003 15:48

Acties:

drm

f0pc0dert

Hm... Als je toch bezig bent, kun je dan meteen ff een voorbeeldje fixen van wat er gebeurt als je gewoon met display:block; en float:left; aan de gang gaat?

Een oplossing is wellicht om de containing div van de knoppen een display:table-row te geven (gokje)?

edit:

Overigens is het in Firebird 0.7 geen enkel probleem. Ik kan je probleem wel reproduceren met Mozilla 1.4

Goeie kans dat het in 1.5 dus wel gewoon goed werkt....

offtopic:
en /me moest toch updaten dus ging dat dan ook maar 's doen

[ Voor 33% gewijzigd door drm op 11-11-2003 15:50 ]

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

dinsdag 11 november 2003 15:51

Acties:

Beaves

Usque ad Finem

mattttt schreef op 11 november 2003 @ 15:46:
Ik zie niet zo snel het probleem met mozilla hier, ze staan netjes naast elkaar

Ik zie hier ook geen probleem, browser is Mozilla 1.5.

Schotlandofiel | Godzijdank ben ik atheïst
Canon 7D / 20D / 300D + glas | Just Light | Flickr

dinsdag 11 november 2003 15:52

Acties:

Verwijderd

Topicstarter

ik doe 1.4 idd
in 1.5 is het dus opgelost? da's een goeie zaak
table-row werkt ook niet overigens, net als alle andere display-varianten

[ Voor 20% gewijzigd door Verwijderd op 11-11-2003 15:52 ]

dinsdag 11 november 2003 15:52

Acties:

bakakaizoku

ja

fb 0.6 heeft iig nergens last van

rm -rf ~/.signature

dinsdag 11 november 2003 15:52

Acties:

disjfa

be

hier ook geen probleem @ firebird

alleen klein probje in opera

verder ff snel naar gekeken maar die js is mij net wat te uitgebreid om @ work door te nemen

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 11 november 2003 15:54

Acties:

crisp

Devver

Pixelated

dit werkt prima hier in Moz1.3b

Cascading Stylesheet:

div.toolbar {
    -moz-box-sizing: border-box;
    border: 1px solid;
    border-color: ThreeDHighLight ThreeDShadow ThreeDShadow ThreeDHighLight;
    height: 24px;
    background-color: silver;
    position: relative;
}
div.toolbutton {
    overflow: hidden;
    width: 23px;
    height: 22px;
    float: left;
}
div.toolbutton img {
    position:relative;
    top:0px;
    left:0px;
}
div.neptuneToolbarHandle {
    float: left;
}

edit: en ook in Firebird 0.7 en Opera 7

[ Voor 5% gewijzigd door crisp op 11-11-2003 15:56 ]

Intentionally left blank

dinsdag 11 november 2003 15:54

Acties:

Genoil

beetje een dooddoener, maar dit effect kun je toch ook gewoon bereiken met CSS borders en een beetje schuiven met je icon?

dinsdag 11 november 2003 16:09

Acties:

disjfa

be

Genoil schreef op 11 november 2003 @ 15:54:
beetje een dooddoener, maar dit effect kun je toch ook gewoon bereiken met CSS borders en een beetje schuiven met je icon?

icoon schuift niet eens.... maar ik neem aan dat hij er een andere reden heeft ipv makkelijk in js

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.toolbar {
    border: 1px solid;
    border-color: ThreeDHighLight ThreeDShadow ThreeDShadow ThreeDHighLight;
    height: 24px;
    background-color: silver;
    position: relative;
}
a{
    display:block;
    -moz-box-sizing:padding-box;
}
a.menu{
    float:left;
    height:22px;
    width:22px;
    text-align:center;
}
a.menu:hover{
    border-top:1px solid #FFF;
    border-left:1px solid #FFF;
    border-right:1px solid #808080;
    border-bottom:1px solid #808080;
}
a.menu2{
    float:left;
    height:22px;
    width:22px;
    text-align:center;
    border-top:1px solid #808080;
    border-left:1px solid #808080;
    border-right:1px solid #FFF;
    border-bottom:1px solid #FFF;
}
</style>
<script type="text/javascript">
    var theSelected;
    function bla(id)
    {
        for(var i=1;i<=5;i++)
        {
            document.getElementById("menu"+i).className="menu";
        }
        document.getElementById(id).className="menu2";
    }
</script>
</head>

<body>
<div class="toolbar" id="N00">
    <a href="javascript:void(0);" onclick="bla(this.id)" id="menu1" class="menu">M</a>
    <a href="javascript:void(0);" onclick="bla(this.id)" id="menu2" class="menu">E</a>
    <a href="javascript:void(0);" onclick="bla(this.id)" id="menu3" class="menu">N</a>
    <a href="javascript:void(0);" onclick="bla(this.id)" id="menu4" class="menu">U</a>
    <a href="javascript:void(0);" onclick="bla(this.id)" id="menu5" class="menu">!</a>

</div>
</body>
</html>

is dat verder

(ff makkelijk snel gemaakt met een i van 5

)

[ Voor 16% gewijzigd door disjfa op 11-11-2003 16:09 ]

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 11 november 2003 16:21

Acties:

Verwijderd

Topicstarter

crisps oplossing werkt idd,

de reden waarom ik het zo doe is vanwege skinningmogelijkheden.

Bedankt allemaal

woensdag 12 november 2003 15:24

Acties:

Verwijderd

Topicstarter

nu we toch over css bezig zijn ben ik weer tegen iets vaags aangelopen (ie 6.0)

ik heb text in een td en die is wel eens groter dan de cell. In dat geval moet ie afgekapt worden.
We zetten dus overflow: hidden op de td, dit werkt echter niet.

een div in de td werkt wel, text wordt netjes afgekapt, alleen de td rekt toch uit (de div niet) zodat ook de geclipte text erin past

position: absolute voor de div lostte het op, totdat ik tr's ga swappen, dan gaat er vanalles mis. De divs zijn dan onzichtbaar totdat je er met je muis overheen gaat (over de td) (dit is een bekende ie bug). Hier is wel wat aan te doen, maar het is allemaal symptoonbestrijding.

Is er een andere (css) oplossing voor?