Removing Inheritance for list-style-type

#1

I've got a <div class="content"> which is within a <div id="main">

I'm finding that the ul and li values for the main div are being
inherited into the content div, in particular, the main div has a
'list-style-type: square' and I cannot get rid of it from the content
div, even though is set to 'list-style-type: none'

Is there a way to force a div class within a div id to not inherit
these values, or some other method to get around this? I'm trying to
use a background image as a custom bullet on my content div but I'm
actually seeing two bullets - the background bullet, and the square
bullet from the parent div.

Thanks for any advice on this.

#2

MP12 wrote:

Quote:

I've got a <div class="content"> which is within a <div id="main"

I'm finding that the ul and li values for the main div are being
inherited into the content div, in particular, the main div has a
'list-style-type: square' and I cannot get rid of it from the content
div, even though is set to 'list-style-type: none'

Is there a way to force a div class within a div id to not inherit these
values, or some other method to get around this? I'm trying to use a
background image as a custom bullet on my content div but I'm actually
seeing two bullets - the background bullet, and the square bullet from
the parent div.

Thanks for any advice on this.

Just be more specific with the rule

div.class ul { list-style-type: square; }
div.class div#main ul { list-style-type: none; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#3

In article <475f4019$0$8418$db0fefd9 (AT) news (DOT) zen.co.uk>,
MP12 <mp12 (AT) invalid (DOT) com> wrote:

Quote:

I've got a <div class="content"> which is within a <div id="main"

I'm finding that the ul and li values for the main div are being
inherited into the content div, in particular, the main div has a
'list-style-type: square' and I cannot get rid of it from the content
div, even though is set to 'list-style-type: none'

Is there a way to force a div class within a div id to not inherit
these values, or some other method to get around this? I'm trying to
use a background image as a custom bullet on my content div but I'm
actually seeing two bullets - the background bullet, and the square
bullet from the parent div.

Thanks for any advice on this.

http://netweaver.com.au/alt/divListDivList.html

--
dorayme

#4

MP12 wrote:

Quote:

I've got a <div class="content"> which is within a <div id="main"

I'm finding that the ul and li values for the main div are being
inherited into the content div, in particular, the main div has a
'list-style-type: square' and I cannot get rid of it from the content
div, even though is set to 'list-style-type: none'

Is there a way to force a div class within a div id to not inherit
these values, or some other method to get around this? I'm trying to
use a background image as a custom bullet on my content div but I'm
actually seeing two bullets - the background bullet, and the square
bullet from the parent div.

You can use <dl> and <dt> or <dd>. It looks like <li> with 'list-style-type:

none'
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

#5

Scripsit Petr Vileta:

Quote:

You can use <dl> and <dt> or <dd>.

Or <blink> or <clue>.

Quote:

It looks like <li> with
'list-style-type: none'

In your dreams. But that's irrelevant. The question was about changing
the visual appearance of elements, with the given markup, not about all
kinds of (wrong) markup that might be used.

I haven't seen the original question, but it appears that no URL was
specified so we don't know what the OP really tried*). But the answer to
the question in the Subject line is simple: to break (prevent)
inheritance, assign a value to the property, for the applicable element.

*) It seems that she or he tried to use background images instead of
bullets, somehow resulting in double bullets. Then the question is: why
don't you simply use list-style-image? (Because you don't want bullets
to appear in printed copies? After all, background images are usually
suppressed on printing.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#6

Hi, just a quick message to say thanks to the posters who replied.
I've used the advice here and it's now working fine!

Thanks again, much appreciated. I can now let my hair grow back again!