Firefox 2 en inline-block

[sjaakaq]

Zie http://zeghooreens.nl/Website%20PHV/

In IE6/7 en Opera krijg je een mooi menu, on-hover lijkt het alsof er een "blokje" uit de header komt. In Firefox sluit dat blokje echter niet mooi aan op de header.

IE:


FF:


Het zit namelijk zo: ik wil een horizontaal gecentreerd menu maken, waarin men niet alleen op de tekst kan klikken maar ook op de lege ruimte eromheen. Dus zou je zeggen:

Cascading Stylesheet:

a:link {display:block}

Maar, bij display:block voegt hij automatisch een break uit na het element, en kun je dus geen horizontaal menu maken.

Gelukkig is daar het magische element inline-block voor; een block zonder de break erachter, maar je kan nog steeds een width en height geven (en dus een soort "klikvlak" creëren ipv. alleen op de tekst klikken).

Wat schetst mijn verbazing? Firefox 2 ondersteunt dit CSS2.1 element niet; Opera en IE wel (zei het bij die laatste alleen alleen op elementen die normaal display:inline hebben, dus ook links).

Dat is dus mooi klote. Gelukkig vond ik 2 "alternatieven", namelijk: -moz-inline-block en/of -moz-inline-box. Helaas werken deze ook niet (meer) in FF2. Ik heb in alle gevallen het geprobeerd met het geven van een fixed hoogte (35px, zo hoog is de DIV waar de links instaan) en een procentuele hoogte (100%); in FF was er steeds geen aansluiting, in IE wel.

Nu heb ik twee vragen:
1 - Werkt het bij jullie FF's ook niet? Of sluit het "blokje" bij jullie wel mooi aan?
2 - Als het bij jullie ook niet werkt: weet iemand een oplossing? Google draagt alleen de 2 alternatieve elementen aan, maar die werken dus ook niet (bij mij althans)...

[ Voor 7% gewijzigd door sjaakaq op 12-01-2007 19:19 ]

[Ejorne]

[Waster]

Op je site zie ik slechts een slecht opgemaakt verticaal menu.

En ik begrijp het niet waarom het niet zou kunnen, want volgens mij heeft alistapart hetzelfde menu als wat jij in gedachten hebt. Komt het niet door de margin of padding.

[Verwijderd]

Safari ondersteunt je code trouwens ook prima, maar FF zet ze inderdaad onder elkaar. Volgens mij kun je beter list-items gebruiken en die met een display:inline naast elkaar zetten. Je kunt de suckerfish dropdown css van alistapart gebruiken (je hebt de sublevels niet nodig uiteraard). De basics van dealen met list-items zijn trouwens hier uitgelegd.

[ Voor 16% gewijzigd door Verwijderd op 12-01-2007 22:41 ]

[sjaakaq]

Waster schreef op vrijdag 12 januari 2007 @ 20:25:
Op je site zie ik slechts een slecht opgemaakt verticaal menu.

En ik begrijp het niet waarom het niet zou kunnen, want volgens mij heeft alistapart hetzelfde menu als wat jij in gedachten hebt. Komt het niet door de margin of padding.

Het is een goed opgemaakt horizontaal menu...Firefox gaat er alleen fout mee om.

Aan een list heb ik gedacht, maar ik wist niet zeker of je dan ook "buttons" kreeg; je displayed de lijst immers inline-->je kan het geen height/width meegeven. Maar dat zal ik later eens proberen

[1st_Ro]

Euh, je kan gewoon je <A> toch gewoon een display:block geven in je inline LI?
Of ben ik nou gek?

[sjaakaq]

Hmm..niet aan gedacht Zal morgen ofzo eens aan de slag gaan...alleen even kijken of het ook allemaal mooi meecentreert als je de browser verkleint etc.

[crisp]

een inline element kan je ook gewoon padding geven en een achtergrond. Tesamen met line-height weet je ook precies hoe hoog je element wordt...

[OnAcid]

li {
float: left;
width: auto;
height: 35px;
line-height: 35px;
}

li a {
display: block;
width: auto;
padding: 0 1em;
height: 33px;
line-height: 33px;
margin-top: 2px;
}

li a:hover, li a.current{
margin-top: 0;
border-top: solid 2px #eee;
}

Dit moet toch redelijk in de buurt komen, zo uit mijn hoofd.
De "margin-top" zou ook padding kunnen zijn. Moet je even testen...

Oh ja en natuurlijk de list-style op none zetten...

[ Voor 7% gewijzigd door OnAcid op 13-01-2007 00:33 ]

[Verwijderd]

in aanvulling op de links die al gegeven zijn: op listamatic staat ook het een en ander

[Blaise]

quote: http://zeghooreens.nl/Website%20PHV/

HTML:

<h1>
<a href="index.html" title="Terug naar de homepage" />
PHV Dag 2007: Studentenverzet</a></h1>

Je sluit je a tag 2 maal af, oftewel die / in de openingstag moet weg. Misschien dat dat iets geks veroorzaakt, maar ik denk het niet.

[sjaakaq]

Blaise: klopt, foutje, maar loste verder niks op

Crisp: dat is een goede, had ik nog niet aan gedacht: een inline element (want zo behandelt FF een inline-block) een hoogte geven adh. van een padding

Oftewel: in FF moest het element een positieve padding-top krijgen (namelijk het verschil tussen de achtergrondafbeelding en de rand van de parent DIV (5px)) en in IE en Opera niet.

Welnu, hier mijn "elegante" oplossing:

Cascading Stylesheet:

#navigatie a:link {
    display: inline-block;
    color: #133142;
    text-decoration: none;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    *padding-top: 0px; /* IE hack; alleen IE voert dit uit */
    }

/* En dit is Opera-only code */         
@media all and (min-width: 0px){
    #navigatie a:link {
        padding-top: 0px;
        }
    }

Ik had wel wat geprobeerd met lijsten, maar daar kreeg ik weer problemen met het centreren...dus dit leek met de minst slechte oplossing. Al mag FF zich schamen dat het zo'n basic element niet ondersteunt...

[crisp]

Cascading Stylesheet:

*padding-top: 0px; /* IE hack; alleen IE voert dit uit */ 

En IE7 dan? Die negeert 'm als het goed is...
Verder vind ik dit niet echt heel elegant. Je oplossing gaat nu uit van de incomplete implementatie van Firefox en vervolgens probeer je dat weer voor andere browsers (eigenlijk enkel IE en Opera) weer recht te breien. Lijkt me sowieso ook niet forwards-compatible.

Ik heb laatst een dergelijk probleem gewoon op kunnen lossen met display:inline en padding ism line-height. Daar heb ik toen geen browser-specifieke hacks bij hoeven gebruiken...

[sjaakaq]

crisp schreef op zaterdag 13 januari 2007 @ 23:09:

Cascading Stylesheet:

*padding-top: 0px; /* IE hack; alleen IE voert dit uit */ 

En IE7 dan? Die negeert 'm als het goed is...
Verder vind ik dit niet echt heel elegant. Je oplossing gaat nu uit van de incomplete implementatie van Firefox en vervolgens probeer je dat weer voor andere browsers (eigenlijk enkel IE en Opera) weer recht te breien. Lijkt me sowieso ook niet forwards-compatible.

Ik heb laatst een dergelijk probleem gewoon op kunnen lossen met display:inline en padding ism line-height. Daar heb ik toen geen browser-specifieke hacks bij hoeven gebruiken...

IE7 negeert het niet.

Ik weet dat het niet elegant is, en zeker niet forwards compatible, maar het is een site die maar kort hoeft te functioneren.

Met padding kan ik het enigszins oplossen, maar probleem is dat bij een top-padding van 5px de tekst in Firefox goed staat maar in de andere browsers 5px teveel naar beneden...zal wel een verschil in implementatie zijn.