Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Mozilla: Make Mozilla not ignore height style of an inline element

Reply
Thread Tools

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

 
 
Henri
Guest
Posts: n/a
 
      02-20-2005
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



 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      02-20-2005
Henri wrote:

> 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.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
 
Henri
Guest
Posts: n/a
 
      02-21-2005
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


"Els" <(E-Mail Removed)> a crit dans le message de
news:Xns960485CEFC43Els@130.133.1.4...
> Henri wrote:
>
> > 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.
>
> --
> Els
> http://locusmeus.com/
> Sonhos vem. Sonhos vo. O resto imperfeito.
> - Renato Russo -
>




 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      02-21-2005
Henri wrote:

> display: -moz-inline-box;


I'd also add:

display: inline-block;

For the benefit of standards compliant browsers.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Henri
Guest
Posts: n/a
 
      02-21-2005
Thanks Toby

"Toby Inkster" <(E-Mail Removed)> a crit dans le message de
news(E-Mail Removed) .uk...
> Henri wrote:
>
> > display: -moz-inline-box;

>
> I'd also add:
>
> display: inline-block;
>
> For the benefit of standards compliant browsers.
>
> --
> Toby A Inkster BSc (Hons) ARCS
> Contact Me ~ http://tobyinkster.co.uk/contact
>
>




 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      02-21-2005
Toby Inkster wrote:
> Henri wrote:
>
>>display: -moz-inline-box;

>
> 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.
 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      02-21-2005
in alt.html, Leif K-Brooks wrote:
> Toby Inkster wrote:
> > Henri wrote:
> >
> >>display: -moz-inline-box;


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.)

> > 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.


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.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      02-22-2005
Leif K-Brooks wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      02-22-2005
Toby Inkster wrote:
> Leif K-Brooks wrote:
>
>
>>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.


http://www.w3.org/Style/CSS/Test/CSS...-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.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      02-22-2005
Leif K-Brooks wrote:
> Toby Inkster wrote:
>> Leif K-Brooks wrote:
>>
>>> 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...

>
> http://www.w3.org/Style/CSS/Test/CSS...-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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - IE/Firefox problem - element height matt@mailinator.com HTML 3 01-17-2006 07:20 PM
CSS min-width, max-width, and min-height with display:inline Lois HTML 1 12-27-2004 03:03 AM
Table Row Background Color CSS Style Not Working IN Mozilla 1.7.1 Monty HTML 3 08-19-2004 03:17 PM
HELP: Relatively positioning a block element to an inline element in Mozilla. Woolly Mittens HTML 8 09-22-2003 06:29 AM
Newbie: CSS+ inline JS works in I.E but not N.N/Mozilla Patrick Javascript 2 08-26-2003 10:17 PM



Advertisments