CSS Mozilla: Make Mozilla not ignore height style of an inline element

[Henri]

Hi,

I'm trying to display an icon before a link, inside a sentence, using CSS.
My icon is 16x16px large.
It displays well in IE but Mozilla ignore the height style (because a link
is an inline element) and the bottom part of the icon is not displayed.
Isn't there a way to make Mozilla not ignore the height style and get the
icon fully displayed?
(I know I could use a bigger font to get it working but I would prefer
another way)

..linkClass {
height: 16px;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
background: transparent url(icon.gif) no-repeat;
padding-left: 22px;
white-space: nowrap;
-moz-user-select: none;
}

<A href="link.html" class="linkClass">Hello</A>

Thanks

Henri

 

[Els]

Hi,

I'm trying to display an icon before a link, inside a
sentence, using CSS. My icon is 16x16px large.
It displays well in IE but Mozilla ignore the height style
(because a link is an inline element) and the bottom part
of the icon is not displayed. Isn't there a way to make
Mozilla not ignore the height style and get the icon fully
displayed? (I know I could use a bigger font to get it
working but I would prefer another way)

Use line-height instead of height, or make the link a block
element.

 

[Henri]

Sorry but line-height doesn't work either.

But I've found the solution ! )
Just needed to add

display: -moz-inline-box;

Thanks anyway for your answer.

Henri

 

[Toby Inkster]

display: -moz-inline-box;

I'd also add:

display: inline-block;

For the benefit of standards compliant browsers.

 

[Henri]

Thanks Toby

I'd also add:

display: inline-block;

For the benefit of standards compliant browsers.

 

[Leif K-Brooks]

I'd also add:

display: inline-block;

For the benefit of standards compliant browsers.

For the benefit of browsers which comply to that particular bit of the
standard, you mean. Mozilla implements parts of the standard that Opera
doesn't, just as Opera implements parts that Mozilla doesn't.

 

[Lauri Raittila]

Does somebody know why it is still with -moz- prefix? If I have
understood correctly, there must be something different than in standard?
(Operas implemention is broken, and I asked them to remove broken support
when version number was under 7.2..., but they insist on having broken
support whiout prefix. Why is good question, as they do support
display:inline-table, which can be often used instead.)

For the benefit of browsers which comply to that particular bit of the
standard, you mean.

Who knows, maybe aliens have standards complient browsers? Or some secret
cult? Or maybe there is one around in 2006. (quite likely, unless big
mistake is made)

Mozilla implements parts of the standard that Opera
doesn't,

Like? (asking,because at the moment I can't think anything in CSS21 or
CSS2 that would go in this category. Unless we take floats, where Opera
has different bugs than mozillas)

just as Opera implements parts that Mozilla doesn't.

Yes.

 

[Toby Inkster]

Mozilla implements parts of the standard that Opera doesn't

I really can't think of what parts of either CSS standard that Gecko
implements but Opera doesn't. Except... Mozilla supports all the CSS 2.0
list-style-types, whereas Opera only supports the more limited subset
found in CSS 2.1.

 

[Leif K-Brooks]

Leif K-Brooks wrote:




I really can't think of what parts of either CSS standard that Gecko
implements but Opera doesn't. Except... Mozilla supports all the CSS 2.0
list-style-types, whereas Opera only supports the more limited subset
found in CSS 2.1.

http://www.w3.org/Style/CSS/Test/CSS2.1/20041125/t051202-c26-psudo-nest-00-c.xht

"In addition, the entire first line should be in a small-caps font and
teal." Mozilla gets that right, Opera doesn't.

 

[Toby Inkster]

http://www.w3.org/Style/CSS/Test/CSS2.1/20041125/t051202-c26-psudo-nest-00-c.xht

"In addition, the entire first line should be in a small-caps font and
teal." Mozilla gets that right, Opera doesn't.

This bug only occurs with XML mime types -- text/html is fine.

This bug only occurs with selectors like "p:first-line" and not
with ".myparagraph:first-line" which will work fine.

Opera does *support* ":first-line". I never claimed that Opera's
implementation is bug-free, just that it's a comparatively complete
implementation of CSS.