Re: [css-d] [+] Sprite technique question

2010-10-22 Thread Thierry Koblentz
> On a sprite technique we often see something like this:
> 
> #menu li a {
> background:url('image/menu.png') no-repeat;
> width:100%;
> height:100%;
> display:block;
> }
> 
> Why, when we set the display to block, the width and height properties
> seem to realise the background image presence and, because of that,
> the width and height setted to 100% will exactly fit the background
> image size?
> To be more clear - I'm not properly getting the relation between this
> triad: background image, display:block; and width or height.

s are inline-level elements so width and height do not apply unless you
style them as block-elements.
Note that the background shows in both cases, it is just that the box is
bigger once it is styled as block.
The width does not have to be explicit though as by default the value is
"auto" and it will fill the parent container.
And height:100% is not a sure thing ;-)

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Sprite technique question

2010-10-22 Thread MEM
Hello all,

On a sprite technique we often see something like this:

#menu li a {
background:url('image/menu.png') no-repeat;
width:100%;
height:100%;
display:block;
}

Why, when we set the display to block, the width and height properties
seem to realise the background image presence and, because of that,
the width and height setted to 100% will exactly fit the background
image size?
To be more clear - I'm not properly getting the relation between this
triad: background image, display:block; and width or height.

Can I have a push?

K. Regards,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/