Sent by Peter-Paul Koch on 18 October 2004 14:02
Hello,
A problem with display: inline-block and differences between Moz 1.6
and FF 1.0PR.
http://www.xs4all.nl/~ppk/hlz/template1.html
http://www.xs4all.nl/~ppk/hlz/hlz.css
1) This is all about the icons in the dark green bar. To the right of
the icons I placed a SPAN for a tiny JavaScript effect. This SPAN,
though, should have the same height as the images to the left of it,
mostly because it also contains a bg-image (the light green line).
2) Obviously, of itself a SPAN cannot have a height. Therefore I gave
it display: inline-block, which does allow for heights to be defined.
This works perfectly in IE Win, Op and Safari.
3) The light green bg image is missing in IE 5.2 Mac. Not the main
problem, but if anyone has a solution I'd be grateful.
4) Now for the real problem: Mozilla doesn't support display:
inline-block. Instead, it supports display: -moz-inline-block. In a
flash of inspiration I did:
span#printtekst {
display: -moz-inline-block;
display: inline-block;
}
And behold: it works fine in Mozilla 1.6 . Apparently it ignores the
value 'inline-block', while all other browsers ignore the value
'-moz-inline-block'. This is exactly what I want.
5) Switching to Firefox 1.0 PR, though, gives a completely different
effect. The span is suddenly placed on the next line, stretching up
the entire green bar in the process. The culprit is definitely the
'-moz-inline-block', which (I think) is interpreted as 'block'.
Can anyone confirm that this is a bug in FF 1.0 PR? Or is something
else going on? At the moment I'm tempted to say "Too bad for Firefox"
and leave the page as it is, but if anyone has a clever idea I'd like
to hear it.
Thanks,
--
-------------------------------------------------------------------
ppk, freelance web developer
Interactie, copywriting, JavaScript, integratie
http://www.quirksmode.org/
------------------------------------------------------------------
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/