making list style images transparent

[cajchris]

hi,

my problem is that i am making a style sheet which makes a page printer friendly. when a link is clicked a javascript function switches the style sheet to the print one.

however certain images do not disappear. the background images from the original style sheet i make transparent by:

display: transparent !important

however for list-style-image entries in the original CSS i cant seem to get them to disappear when i do:

list-style-image: transparent !important

regards,
cajchris

 

[BabyJeffy]

Try:

list-style-image: none!important

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[BillyRayPreachersSon]

transparent" is not a valid value for either the "display" or "list-style-image" properties, AFAIK, which is probably why your CSS is not behaving as you might expect.

To remove bullets, use:

ul, li {
   list-style-type: none !important;
   list-style-image: none !important;
}

To remove all background images, use:

* {
   background-image: none !important;
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cajchris]

no the transparent does work for background images as that is already working. if you do none then nothing within the area with that background appears at all.

regards,
cajchris

 

[cajchris]

this

list-style-image: none !important;

doesnt appear to work either

:-(

regards,
cajchris

 

[cLFlaVA]

Dan, Jeff,

Why are you guys so emphatic on the "[tt]!important[/tt]" clause? I've never used it.

?

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[BabyJeffy]

I'm not a fan of the !important at all actually I was just copying/pasting the example from the OP.

The !important rule is very handy when modifying CSS (that you have inherited) where there is a chance that specificity would cause your css change to not work. For me it's a development tool... I would never (knowingly) leave an !important in final CSS for a production site. There's just no need.

Cheers - good point, too!
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[cLFlaVA]

thanks for the clarification...

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[Tarwn]

Prior warning, my cubemate has been commenting on how well I have been making friends today

Issue 1: You shouldn't need to use Javascript to change to a print view. The CSS @media print should be all you need. Just create a second set of styles that only apply to the printed copy, set the media, no script necessary.

Issue 2: Getting rid of images. If you want to make them disappear and have content flow into any space they were originally taking up, then display: none; should work. I you wat them gone but want to leave behind the space they were in, then visibility is the attribute you want. If you want to get rid of a background image, then you will need to redefine the background attribute in your print styles (as they are not elements in the page like img tags are).