Context:
> #menu li a {
> background:url('image/menu.png') no-repeat;
> width:100%;
> height:100%;
> display:block;
> }
Add on:
#menu li {
height: 100px;
width: 200px;
}
> <A>s are inline-level elements so width and height do not apply unless you
> style them as block-elements.
ok. :)
> Note that the background shows in both cases,
You mean when we have display:block; or the default display:inline, correct?
> it is just that the box is bigger once it is styled as block.
Here is the main doubt: how do you know that it will be "enough
bigger" to display the background?
Or, saying otherwise, when we set a to display block it will be ALWAYS
as bigger as the container allows it to be.
In this case, the container will be a fixed width and height of the
parent li element.
Yes?
> The width does not have to be explicit though as by default the value is
> "auto" and it will fill the parent container.
I would love to have a cheat-sheet so that I can see what is the
default position and display values of elements... :D :D
:D ?
> And height:100% is not a sure thing ;-)
So, should we consider other way for giving height to our a elements,
either then the couple: "height:100%; + display:block;" ?
ie. line-height + display:block; ?
>
> --
> Regards,
> Thierry
Thanks a lot.
______________________________________________________________________
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/
