This is a forum where members new and old can come to ask questions and get info and opinions. It is not a place to advertise your business or have other forms of advertising, whether it be in your posts or signature.

All links in the forum will not be indexed by Search Engines and any unapproved forms of advertising or spam will be dealt with accordingly, deleted, and that member's account banned.

Forums

Overview » CSS » can anyone help me with "display" property ?

can anyone help me with "display" property ?
ps sheba Member Since: 27 Oct 2007 Posts: 6	Posted 06 Jun 2009 11:32:39 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 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

can anyone help me with "display" property ?

ps sheba
Member

Since: 27 Oct 2007
Posts: 6

Posted 06 Jun 2009 11:32:39

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

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

satheesh Dominic Member Since: 24 Apr 2007 Posts: 44	Replied 23 Jun 2009 05:05:33 <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

ps sheba Member Since: 27 Oct 2007 Posts: 6	Replied 06 Oct 2009 10:54:52 Sorry Satheesh for the long (very long) delay of my response. I was absent for long time. Thanks a lot for your response