Forums
This topic is locked
can anyone help me with "display" property ?
06 Jun 2009 11:32:39 ps sheba posted:
Hi everyone,I'm having a problem in understanding the "display" propery.
In my page there is a "ul" list. That list is a list of linksand it resides in a div named "navigation".
The div's width property is set to 150px.
The div#navigation ul selector's margin and padding properties are set to 0.
The div#navigation ul li a selector's width property is set to 135px.
The div#navigation ul li a selector's background-image property is set to pic.jpg
which is 145px wide image.
"background-repeat" property is set to "repeat-y".
Uploading that page i can only see a part of the links background image
because it is a 145px long and the "a" width is limited to 135px.
When i add to div#navigation ul li a the "display" property with value "block"
I can see the whole background image !
Is there an explanation to that ?
Why is the 145px wide background image seen under limitation of #navigation ul li a 135px width
when ther is no "display" property attached to it and why is that limitation ignored with "display:block"
property attached ?
Thanks
Replies
Replied 23 Jun 2009 05:05:33
23 Jun 2009 05:05:33 satheesh Dominic replied:
<a> tag is an inline element (in other words, by default, the "display" property value will be "inline" ).
Hence the background image will be visible only till the width of the <a> element's width.
When you define "display:block" for the anchor element, it will override the default property and the "anchor" tag will display like a "block level" element.
you may find more information on "inline elements" and "blocl level elements" from the following url:
htmlhelp.com/reference/html40/inline.html
Hence the background image will be visible only till the width of the <a> element's width.
When you define "display:block" for the anchor element, it will override the default property and the "anchor" tag will display like a "block level" element.
you may find more information on "inline elements" and "blocl level elements" from the following url:
htmlhelp.com/reference/html40/inline.html
Replied 06 Oct 2009 10:54:52
06 Oct 2009 10:54:52 ps sheba replied:
Sorry Satheesh for the long (very long) delay of my response.
I was absent for long time.
Thanks a lot for your response
I was absent for long time.
Thanks a lot for your response