Printing custom (background img) bullets?

How do I get my print style sheet to show ANY type of bullet?

[SnowTao]

I have two types of unordered lists on my site: I have searched and searched and cannot find what to put in my print style sheet to make ANY kind of bullet show up on the printed page. (I know the print style sheet is working because the search box and nav-bar go away as they should in the print version.)

This is my ul coding:
.med-ball ul {
margin: 0;
padding: 0;
list-style-type: none;
}

ul.med-ball li {
list-style-type: none;
padding-left: 1.8em;
background: url(../art/med-ball.gif) no-repeat left top;
text-align: left;
margin-top: 0.5em;
}

.smallball {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
padding: 0;
padding-left: 2em;
list-style-type: none;
background-image: none;
}

ul.smallball li {
list-style-type: none;
padding-left: 1.3em;
background: url(../art/smallball.gif) no-repeat left top;
text-align: left;
margin-top: 0.2em;
margin-bottom: 0;
}

Tried putting the above (screen) coding INTO my separate print style sheet -- no effect.

Tried the following in my separate print style sheet and it did nothing. The style sheet is affecting the printed page somewhat, because by changing the "margin-left" coding, the list item moves; but no bullet shows up.

ul.smallball {
list-style: disc;
margin-left:30px;
}
ul.smallball li {
padding-left:0px;
background:none;
}

Help?
Elenor

[swa66]

printing backgrounds is an option that can be turned on or off in the browsers.
I think most if not all default it to be turned off.

What I think you need is:

li {
 list-style-type: none;
 /* add graphical background image as list bullet here */
}
@media print {
 li {
  list-style-type: disk;
  /* undo background image settings */
 }
}

untested.

If you reset padding margins on the UL, you might need to counteract that as well inside the @media print.

All can go in your regular stylesheet... the @media takes care of applying it only while printing.

[SnowTao]

Thanks! I'll try that.

[SnowTao]

Ah, {sigh} nope. Nothing. Not when I use just "li" and not when I use "ul.med-ball li."

I don't think it can be the 'space' left by the graphical bullet turning undisplayed, right? Cause the medium bullet has 1.8em left padding,and the small bull has 1.3em left padding; so that should be ample space for a 'browser generated' text bullet to show up? (I'm grasping at CSS straws here...)

[D_Blackwell]

I've been following this thread, and been a bit confused.? IF there is an issue with printing the list-style-type: or setting up a print stylesheet for same, and you feel like you have to have it, can you just go around the problem and setup a print sheet that will insert ascii characters instead?

My confusion is that I have always viewed list-style-type: as a character entity to be rendered as any other character, and not subject to issues with printing images; and I've never encountered printing issues myself. Perhaps I am simply wrong and been walking on the thin ice of mistaken assumptions. If so, I'd like to be directed to the appropriate W3C recommendations on the subject.
..........................

Separate issue:
I would not use a class name in more than one context. For example, you have the 'global' class .smallball - and you also have a different .smallball class specifically associated with <ul>. The markup for both should be rendered (according to priority of conflicts) and this is inviting trouble. I would recommend against this as not the 'best practice' in naming classes. Eventually, using the same class name in different contexts is going to cause problems.

[SnowTao]

IF there is an issue with printing the list-style-type: or setting up a print stylesheet for same, and you feel like you have to have it, can you just go around the problem and setup a print sheet that will insert ascii characters instead?

That's what I'm trying to do. Since I cannot get the actual graphic bullet to print, I am entirely willing (and trying to) get the (print) style sheet to print the 'standard' list item bullet as per normal HTML. Only it won't. I am not able to get ANY bullet of any sort to print. (I'm just about to the point of being willing to put the doggoned bullets in the HTML text if I had to, but there are 230 files of multiple page lengths... so it's impossible.)

My confusion is that I have always viewed list-style-type: as a character entity to be rendered as any other character, and not subject to issues with printing images; and I've never encountered printing issues myself. Perhaps I am simply wrong and been walking on the thin ice of mistaken assumptions. If so, I'd like to be directed to the appropriate W3C recommendations on the subject.

My confusion is that I am willing to use ascii list item bullets in print, as I cannot get the graphic ones to print -- I don't really CARE what bullet prints, I just need bullets to print. But I can't figure out how to get either kind to print.

Separate issue:
I would not use a class name in more than one context. For example, you have the 'global' class .smallball - and you also have a different .smallball class specifically associated with <ul>. The markup for both should be rendered (according to priority of conflicts) and this is inviting trouble. I would recommend against this as not the 'best practice' in naming classes. Eventually, using the same class name in different contexts is going to cause problems.

Ah, meaning I should have used the ul with the first .smallball code? There is only the one .smallball -- a <ul> description belonging to the .smallball ul.; the second one is actually the <li> description. I was having trouble with bullet showing on screen sometimes in some documents, but not in others. (I only noticed the non-conformity in the code when I posted the code here...)

I have to call out the lists and list items separately, to differentiate the small- and medium-bulleted lists.

Any idea what code to add to the print style sheet to get either the graphic bullet to print or an ascii one?

[swa66]

If you reset the margins/padding on the <ul> and <li> in the normal stylesheet, you need to be aware that different browsers have their own idea of either using padding on the <ul> or margin on the <li>, you need to allow space for the bullet to reappear again.
This is different from what you did to get space for the background image where you remove this and use padding on the <li> ... (you wanted space inside the <li>, now you want space outside of the <li> )

2em padding-left on the <ul> (and removing the padding on the <li> ) should do the trick in the print style.

[SnowTao]

{sigh} Thanks, but that doesn't work either: I tried each of these:

.smallball {padding-left: 2em;}
ul.smallball {padding-left: 2em;}
ul {padding-left: 2em;}
li {padding-left: 2em;}
.smallball li {padding-left: 2em;}

Nothing prints. Then I thought, oh maybe this:

ul {list-style-type: disk; padding-left: 2em;}

(also tried:
ul {list-style-type: disk; padding-left: 2em; margin-left: 2em;}

Tried both in all the permutations above. Still nothing.

I've made sure the print style sheet comes after the global style sheet in the file <head>.

As part of my (very limited "reset" in the global style sheet, I have only this:

ul, li {
margin: 0;
padding: 0;
}

There is no other code for lists or list items anywhere. I'm just baffled.

[SnowTao]

Oh yeah,here's what the actual coding looks like in the html:

<ul class="smallball">
<li>About the actual situation. </li>
<li>About whether they know what they are doing.</li>
<li>About feeling like an impostor. </li>
</ul>

I can't see anything here that would affect the printing either.

[swa66]

Take care with the specificity.

e.g.:
".smallball li" (0.0.1.1) can't beat a "ul.smallball li" (0.0.1.2) no matter the order.

TRy this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>test</title>
    <style type="text/css">
      .smallball {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .smallball li {
        background: url(ball.jpg) no-repeat left top;
        padding: 0 0 0 2em;
        margin: 0;
      }
      @media print {
        .smallball {
          list-style-type: disc;
          padding: 0 0 0 2em;
        }
        .smallball li {
          background: transparent;
          padding: 0;
        }
      }
    </style>
  </head>
  <body>
     <ul class="smallball">
       <li>About the actual situation. </li>
       <li>About whether they know what they are doing.</li>
       <li>About feeling like an impostor. </li>
     </ul>
  </body>
</html>

Only tried it in Firefox so far.

[SnowTao]

Oh wow! Thank you SO much! It works! (And I've checked it in MSIE6 (the bane of my existence!), and Opera; will check the others tomorrow... But you have really really helped me out!