Gecko 1.8.1 en ouder niet goed met background-position

[GWTommy]

Al een tijdje klaar met mn layout, ik wist dat er wat bugjes in zaten qua cross-browser rendering. Vandaag een langs browsershots gehaald. Nu blijkt dat deze browsers moeite hebben met mn CSS Sprite:

code:

 * Flock 1.1
   Gecko 20080304
 * Firefox 2.0.0.19
   Gecko 20081216
 * Kazehakase 0.5.4
   Gecko 20090324
 * Firefox 1.5
   Gecko 20051111
 * Firefox 2.0.0.4
   Gecko 20070515
 * Iceape 1.0.9
   Gecko 20070505
 * K-Meleon 1.1
   Gecko 20080203
 * Navigator 8.1.3
   Gecko 20070321
 * SeaMonkey 1.1.13
   Gecko 20081031
 * Flock 1.2.6
   Gecko 20080913
 * K-Meleon 1.5.0
   Gecko 20080716
 * Navigator 9.0.0.5
   Gecko 20071206
 * Iceweasel 2.0.0.18
   Gecko 20081030
 * Kazehakase 0.4.2
   Gecko ?
 * Flock 1.1.2
   Gecko 20080414
 * Iceape 1.1.14
   Gecko 20081204
 * Navigator 9.0.0.6
   Gecko 20080219
 * SeaMonkey 1.1.15
   Gecko 20090324

Uit deze lijst kon ik opmaken dat het ging om Gecko <= 1.8.1.

Zoals het moet zijn:
http://api.browsershots.o...aef890b08a38949049cc4.png
(Firefox 3.0.8/WinXP)

Gecko fout:
http://api.browsershots.o...b653eec29125342fefa11.png
(Flock 1.2.6/WinXP)

Zoals je ziet ontbreekt de tekst op de headertjes in de oudere Gecko versie. Dit is gek, omdat de header, die ook met CSS Sprite is opgebouwd, wel helemaal goed er uit ziet.

Hier is de code die ik gebruik voor de tekst op zo'n headertje:

code:

<h1>
  <span class="string04">
    <span class="l"><!-- --></span>
    <span class="a"><!-- --></span>
    <span class="t"><!-- --></span>
    <span class="e"><!-- --></span>
    <span class="s"><!-- --></span>
    <span class="t"><!-- --></span>
    <span class="n"><!-- --></span>
    <span class="e"><!-- --></span>
    <span class="w"><!-- --></span>
    <span class="s"><!-- --></span>
  </span>
</h1>

Weet iemand of dit echt een bug is in Gecko of dat ik dit zelf kan fixen met een hack oid.? Ik hoop snel van jullie te horen.

[Gersomvg]

Heeft het niet iets te maken met display:inline-block? Geloof ik is dat nog niet zo lang ondersteunt.

Inderdaad, heb dit gevonden op een website:

display: inline-block
Works (more or less) in: IE5+/Win, IE5/Mac, Op7+, Saf, Gecko 1.9+. Many differences in vertical-align interpretation.

Je zal dus iets moeten doen met display:block en float:left

[ Voor 60% gewijzigd door Gersomvg op 01-05-2009 21:10 ]

[crisp]

Firefox 2.x is ook niet meer officieel supported en voor zover ik weet is het marktaandeel daarvan ook nagenoeg irrelevant. Die andere exoten die nog Gecko 1.8.x gebruiken zou ik ook gewoon negeren.

[GWTommy]

Damn, float: left gaat niet werken. Werkt display: -moz-inline-box; wel in Gecko 1.8.1 en ouder?

[Fuzzillogic]

GWTommy schreef op vrijdag 01 mei 2009 @ 21:20:
Damn, float: left gaat niet werken. Werkt display: -moz-inline-box; wel in Gecko 1.8.1 en ouder?

Ik meen me te herinneren dat inline-block in oudere gecko's niet verder kwam dan niveautje "brak". Maar zoals Crisp al zegt, vanwaar alle moeite? De site gaat pas in juli live, dan is Firefox 3.5 waarschijnlijk al releaset. Je doelgroep, gamers, is een apart volkje. De kans dat die met een oude versie van Firefox rondsurfen lijkt mij klein.

Ook ik zeg: het probleem is geen probleem; ga wat leukers en constructievers doen met de vrijgekomen tijd.