Mozilla bugje? display:block - Softwareontwikkeling

donderdag 9 oktober 2003 20:13

Acties:

Verwijderd

Topicstarter

Ik ben een tijdje bezig met het maken van een eigen treeview widget, en ik wil het graag crossbrowser hebben.

De structuur is als volgt:

[node]
[toggle icoon]
[node icoon]
[node label]
[node container voor childnodes]

Ik heb alleen een beetje vreemd verschijnsel, dat de DIV's over elkaar heen lopen. De icons missen als je het test maar je ziet goed wat er aan de hand is. Ik heb nog wat geprobeerd met overflow:visible display:inline block, etc. maar het zou zo goed moeten werken.

De code zoals die hieronder staat is dmv innerHTML verkregen, dus quotes zitten er niet in (vreemd dat createElement en toevoegen van attributes niet volgens de standaard werkt overigens dwz missende quotes in gegenereerde code)

Enige wat je nog extra zou verwachten is het missen van een height op de childnodes div, maar dat zou niet nodig moeten zijn. Is dit een bug in Mozilla?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>MMTreeView</title>
    <style type="text/css">
    .node, .node_selected{
        margin-left:19px;
        display:block;
        font:icon;
        height:19px;
        background-repeat: repeat-y;
    }
    
    .toggle{
        display:inline;
        width:19px;
        height:20px;
    }
    
    .icon{
        display:inline;
        width:16px;
        height:16px;
    }
    
    .node{
        background-color:#ffffff;
        color:#000000;
    }
    
    .node_selected{
        background-color:#ffffff;
        color:#000000;
    }
    
    .label{
        font-family:Arial;
        font-size:11px;
        color:#000000;
        background-color:transparent;
        text-decoration:none;
    }
    .label_selected{
        font-family:Arial;
        font-size:11px;
        color:#ffffff;
        background-color:#003366;
        text-decoration:none;
    }
    .tree{
    }
    </style>
    
</head>

<body>
<DIV class=tree id=treeviewtje>
<DIV style="DISPLAY: block">
    <DIV class=node style="BACKGROUND-IMAGE: url(tree/i.gif)">[img]"tree/tminus.gif"[/img][img]"tree/folder_scheduled.gif"[/img]<A class=label_selected href="javascript://">nieuwe node 1065724876518</A>
        <DIV style="DISPLAY: block">
            <DIV class=node style="BACKGROUND-IMAGE: url(tree/i.gif)">[img]"tree/t.gif"[/img][img]"tree/folder_scheduled.gif"[/img]<A class=label href="javascript://">nieuwe node 1065724878701</A>
                <DIV style="DISPLAY: none"></DIV>
            </DIV>
            <DIV class=node>[img]"tree/l.gif"[/img][img]"tree/folder_scheduled.gif"[/img]<A class=label href="javascript://">nieuwe node 1065724882596</A>
                <DIV style="DISPLAY: none"></DIV>
            </DIV>
        </DIV>
    </DIV>

    <DIV class=node>[img]"tree/l.gif"[/img][img]"tree/folder_scheduled.gif"[/img]<A class=label href="javascript://">nieuwe node 1065724877118</A>
    <DIV style="DISPLAY: none">
    </DIV>
</DIV>
</DIV>

</DIV>
</body>
</html>

[ Voor 17% gewijzigd door Verwijderd op 09-10-2003 20:14 ]

donderdag 9 oktober 2003 20:57

Acties:

crisp

Devver

Pixelated

haal je height weg bij je node class

btw, een div is al een block-level, en een image is ook al een inline-level element, dat hoef je dus niet expliciet te vermelden

Intentionally left blank

donderdag 9 oktober 2003 21:00

Acties:

Verwijderd

Topicstarter

verdomd... die height deed het hem

Maar wat vreemd dat Mozilla zelf niet in de gaten heeft dat het over elkaar loopt zonder dat het absolute is gepositioneerd. Je zou dan verwachten dat hij hem 19px min, maakt, en vergroot zodra de inhoud ook groter wordt.

donderdag 9 oktober 2003 21:01

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 09 oktober 2003 @ 21:00:
verdomd... die height deed het hem Maar wat vreemd dat Mozilla zelf niet in de gaten heeft dat het over elkaar loopt zonder dat het absolute is gepositioneerd. Je zou dan verwachten dat hij hem 19px min, maakt, en vergroot zodra de inhoud ook groter wordt.

div's uitrekken is typisch een IE-trekje, Moz maakt de div precies 19 pixels hoog en laat de rest van de inhoud eroverheen 'vloeien' als het ware (overflow: visible)
als je een minimale hoogte wilt kan je min-height gebruiken (maar dat kent IE dus niet)

[ Voor 8% gewijzigd door crisp op 09-10-2003 21:02 ]

Intentionally left blank

donderdag 9 oktober 2003 21:04

Acties:

Verwijderd

Topicstarter

In ieder geval werkt het nu, maar een vreemde aanpak is het wel

Ik vind persoonlijk de IE methode een stuk vriendelijker.

donderdag 9 oktober 2003 21:09

Acties:

tekno

tja, ie doet wel meer van die vriendelijke dingen, maar dat zijn meestal niet echt zaken die de standaard volgen. Niet dat ik wil zeggen dat dit echt slecht is, met zo'n marktaandeel boeit het toch niet meer echt

donderdag 9 oktober 2003 21:14

Acties:

Clay

cookie erbij?

Verwijderd schreef op 09 October 2003 @ 21:04:
In ieder geval werkt het nu, maar een vreemde aanpak is het wel Ik vind persoonlijk de IE methode een stuk vriendelijker.

Op zich wel misschien, maar daarvoor bestaat min-height juist; het wordt zo hoog, en als er meer inzit rekt het mee. IE gebruikt height ook eigenlijk foutief als min-height. Al is dat wel zo practisch, gezien die min-height zelf niet ondersteunt

Alleen voor td's ofzo, maarja, dat is nou net het element wat je helemaal geen hoogte moet willen geven

[ Voor 26% gewijzigd door Clay op 09-10-2003 21:14 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 9 oktober 2003 21:14

Acties:

crisp

Devver

Pixelated

Er zijn meer momenten dat ik IE vervloek dan Mozilla hoor, behalve het boxmodel - dan vind ik de IE-manier weer prettiger (aan de andere kant moet je de IE manier wel volgen omdat je IE niet kan confirmeren naar het W3C model, maar Mozilla wel naar het IE model)*

* geldt niet voor strict mode in IE6 - maar om nou alleen nog maar IE6 te ondersteunen....

Intentionally left blank

donderdag 9 oktober 2003 21:19

Acties:

Verwijderd

Topicstarter

Wel een minpuntje blijft nog steeds het verticaal alignen van elementen, en het positioneren van footers. Hopelijk gaat dat ooit nog eens veranderen

donderdag 9 oktober 2003 21:19

Acties:

Clay

cookie erbij?

boxmodel kan je wel omheen css'en. De enige regel die je daarvoor aan hoeft te houden is dat je alleen width en height moet geven aan elementen zonder borders, margins of padding, en dat je nooit width en height opgeeft als ze wel borders, margins of padding hebben.
Die kan je dan nesten in iets met de juiste dimensie, en een Block level element rekt zich toch uit naar alle beschikbare breedte, en dat is ongeacht het boxmodel altijd gelijk als je geen width opgeeft.

Zo kan je zonder rekening te hoeven houden met boxmodels css'en in IE5.0 tot en met 6, Moz, en mac meuk.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 9 oktober 2003 21:37

Acties:

crisp

Devver

Pixelated

Clay schreef op 09 October 2003 @ 21:19:
boxmodel kan je wel omheen css'en. De enige regel die je daarvoor aan hoeft te houden is dat je alleen width en height moet geven aan elementen zonder borders, margins of padding, en dat je nooit width en height opgeeft als ze wel borders, margins of padding hebben.
Die kan je dan nesten in iets met de juiste dimensie, en een Block level element rekt zich toch uit naar alle beschikbare breedte, en dat is ongeacht het boxmodel altijd gelijk als je geen width opgeeft.

Zo kan je zonder rekening te hoeven houden met boxmodels css'en in IE5.0 tot en met 6, Moz, en mac meuk.

true, maar je maakt je structuur daarmee complexer dan je zou willen. Maar goed, je kan ook niet verlangen dat iedereen altijd maar de laatste versie draait - workarounds zal je altijd blijven houden.

Verwijderd schreef op 09 October 2003 @ 21:19:
Wel een minpuntje blijft nog steeds het verticaal alignen van elementen, en het positioneren van footers. Hopelijk gaat dat ooit nog eens veranderen

zelfs daar valt meestal wel een mouw aan te passen - hoewel ik laatst een mooie layout had gemaakt met header, footer, leftmenu, rightmenu en scrollable content area die het prachtig deed in Moz en IE, en toen gooide Opera roet in het eten

Intentionally left blank

donderdag 9 oktober 2003 21:44

Acties:

Clay

cookie erbij?

true, maar je maakt je structuur daarmee complexer dan je zou willen. Maar goed, je kan ook niet verlangen dat iedereen altijd maar de laatste versie draait - workarounds zal je altijd blijven houden.

Idd, je kan soms wel eens 1 laag dieper moeten nesten dan zonder deze aanpak, maar het is een vrij robuuste workaround, betrouwbaar qua uitkomst, dus tot er wat beters komt blijf ik hem gebruiken

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin