[css] ie:div rekt mee moz:div rekt niet mee

[Verwijderd]

Ik zit met een nare bug en ik doe waarschijnlijk wat fout. Ik heb een "favoriete menu items" menubar die perfect eruit ziet onder IE6, maar brak onder Mozilla/Firebird. Waarschijnlijk doe ik iets niet volgens de specs, en negeert IE dit.

Doordat de buttons in columns staan bepaal ik elke nieuwe column door de grootste button uit de vorige column te pakken qua offsetWidth. Doordat Mozilla de DIV die ik om een button heb geplaatst niet meeschaald krijg ik incorrecte offsetWidths terug, en lopen de columns over elkaar heen. Ik wil de columns geen vaste breedtes geven omdat je zo tussen columns rare lappen whitespace kunt krijgen.

Mozilla gaat wel meeschalen zodra ik de container relative positioneer.

Waar ga ik de fout in? ..

De doctype is:


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Het resultaat in IE6 :



Het resultaat in Mozilla en Firebird




De javascript die dit opbouwt:

JavaScript:

favMenuButton.prototype.create = function(){
        this.button = document.createElement("DIV");
        this.button.className = 'fbutton';
        this.button.obj = this;
        
        this.ficon = document.createElement("IMG");
        this.ficon.src = this.icon;
        this.button.appendChild(this.ficon);
        
        this.label = document.createElement("DIV");
        this.label.className = 'caption';
        this.label.appendChild(document.createTextNode(this.caption));
        this.button.appendChild(this.label);
        
        this.button.onclick = favMenuButton_onClick;
        this.button.onmouseover = favMenuButton_onMouseover;
        this.button.onmouseout = favMenuButton_onMouseout;
        this.button.onmousedown = favMenuButton_onMousedown;
        this.button.onmouseup = favMenuButton_onMouseup;
        
        this.button.style.top = favMenuCurY +'px';
        this.button.style.left = favMenuCurX +'px';

favMenuCurY wordt bepaald adhv columns en rows.

De css:

Cascading Stylesheet:

#cmd_Container{
    position:absolute;
    top:40px;
    left:250px;
    width:100%;
    height:65px;
    overflow:hidden;
    
}
#cmd_Listing{
    position:absolute;
    top:0px;
    left:25px;
}
.favoritesCol{
    float:left;
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    -khtml-opacity: .5;
}

.fbutton, .fbutton_hot, .fbutton_down {
    position:absolute;
    font-family:arial; 
    font-size:11px;
    color:white;
    
    cursor: hand;
    cursor: pointer;
    margin-bottom:2px;
    white-space:nowrap;
}
.fbutton{
    padding:2px;
}
.fbutton_hot{
    padding:1px;
    border:1px solid #6B6A72;
    background-image:url(../../styles/blue/gfx/btnbg2.gif);
}
.fbutton_down{
    padding:1px;
    border:1px solid #6B6A72;
    background-image:url(../../styles/blue/gfx/btnbg.gif);
}
.fbutton img, .fbutton_hot img, .fbutton_down img{
    vertical-align:middle;
}
/*label div in favorite button*/
.fbutton div, .fbutton_hot div, .fbutton_down div{
    display:inline;
    margin:0px 5px 0px 5px;
    height:16px;
    vertical-align:middle;
}

Wat zorgt er hiervoor dat de div niet meeschaalt?

[ Voor 8% gewijzigd door drm op 23-01-2004 09:01 . Reden: ff codetags toegevoegd :) ]

[crisp]

Wat gebeurd er als je de div een min-width geeft van zeg 10px?

[Verwijderd]

Dan wordt de container div ook 10px breed en wordt de al incorrecte offsetWidth ook met 10px verhoogd.

[creative8500]

Je kunt het ook keurig met een lijstje doen hoor, met zoiets:

HTML:

<ul>
    <li id="access">access & restrictions</li>
    <li id="remove">remove</li>
    <li id="logging">logging</li>
    <li id="movedown">move down</li>
    <li id="modify">modify</li>
    <li id="extranet">extranet</li>
    <li id="approval">approval</li>
    <li id="import">import & export</li>
    <li id="view">view</li>
    <li id="moveup">move up</li>
</ul>

Cascading Stylesheet:

ul
{
    width: 50em;
}
li
{
    float: left;
    width: 33%;
}
li#access
{
    list-style-image: url(../images/icons/access.png);
}

[crisp]

creative8500: het is juist niet de bedoeling dat ze allemaal even breed worden

Gordijnstok: als je eens een opzetje maakt waarin de elementen niet met JS worden gegenereerd, maar je wel de positionering adhv de breedtes uitvoerd.
Als dat wel goed gaat moet je misschien tussen die 2 stappen een timeout zetten om de engine tijd te geven de zaak te renderen.

Anders moet je misschien de breedte bepalen aan de hand van de breedte van de inhoud zelf ipv de breedte van de div. En was het automatisch uitrekken van div's niet iets IE-only, en neemt Mozilla bij gebrek aan een width gewoon een breedte van 0px aan en rendert hij de inhoud buiten de box (default overflow:visible)? Dat kan je natuurlijk verifieren door de div even een border te geven.

Ik zie trouwens dat je voor de caption een div gebruikt met display:inline; waarom dan geen span?
Bedenk trouwens ook dat je een span / inline-div geen height kan geven

[ Voor 49% gewijzigd door crisp op 22-01-2004 08:59 ]

[Verwijderd]

Mozilla is correct hier. Voor de duidelijkheid: in IE gedraagt WIDTH/HEIGHT zich als MIN-WIDTH/MIN-HEIGHT. En dat is iets wat je niet wil.

[Verwijderd]

crisp: Ik kan het proberen maar ik vermoed dat ik gewoon een fout heb staan. Ik probeer het iig even ondanks dat ik vermoed dat het resultaat niet anders zal zijn.

Anne: er zijn geen widths en heights op de container gedefinieerd, juist om de reden die je al noemt. Alleen voor crisps suggestie probeerde ik het even.

[na edit]

Ik heb even een case gemaakt die gelukkig ook fout gaat zonder de hele interface eromheen. Het gedeelte hangt achter diverse logins vandaar dat ik niet zomaar een url kon geven.

De bekijkbare case:
http://www.mschopman.demon.nl/case/index.html

En ik heb er ook een rar file (winrar) van gemaakt zodat je niet in de source op zoek hoeft te gaan naar alle bestanden etc.
http://www.mschopman.demon.nl/case.rar

Wellicht dat er zo makkelijker een antwoord kan worden gevonden. Forgive de spaghetti js code Ik was nog niet eens aan het opruimen begonnen.

[ Voor 49% gewijzigd door Verwijderd op 22-01-2004 21:22 ]

[Verwijderd]

De oplossing: in de class #cmd_Listing position van absolute naar relative veranderen.

Ik ben alleen nu wel benieuwd waarom elementen binnen de div met deze class zo anders reageren met een relative position op de div.

[Verwijderd]

crisp schreef op 22 januari 2004 @ 08:44:
Ik zie trouwens dat je voor de caption een div gebruikt met display:inline; waarom dan geen span?
Bedenk trouwens ook dat je een span / inline-div geen height kan geven

Dat is een bug die ik misbruik. Zodra je een span gebruikt kan je geen vertical-align meer gebruiken omdat het inderdaad niet toepasbaar is op een inline element. Echter pikken alle browsers wel een vertical-align op een div die desondanks als display:inline is gedefinieerd.

Hoe en waarom... geen idee, maar het werkt wel.

[Verwijderd]

Onzin. 'vertical-align' kan alleen op INLINE en TABLE-CELL gezet worden: http://www.w3.org/TR/CSS2...ml#propdef-vertical-align

Je bent vast vergeten 'line-height' te definieren of niet?

[Verwijderd]

Verwijderd schreef op 23 januari 2004 @ 07:43:
Onzin. 'vertical-align' kan alleen op INLINE en TABLE-CELL gezet worden: http://www.w3.org/TR/CSS2...ml#propdef-vertical-align

Je bent vast vergeten 'line-height' te definieren of niet?

Je zou het inderdaad wel zeggen naar de specs kijkend, maar ik krijg in de praktijk een andere uitwerking

[ Voor 18% gewijzigd door Verwijderd op 23-01-2004 08:52 ]