Example

ul { list-style-image:url(picName.jpg); }

Done in one short line. This will simply make every un-ordered list have an image in place of the dot. So then an un-ordered List in XHTML such as:

List Item 1
List Item 1
List Item 1

would look like

(Note my list image is )

The only problem with this is that every unordered list will use this image. To fix this we will give the unordered list a class name this way we get to choose which list will show the image and which will use the default dot.

CSS:

ul.imgList { list-style-image:url(picName.jpg); }

XHTML

List Item 1
List Item 1
List Item 1

View the tutorial here.

Recently at work one of the sites that we inherited, and now maintain, asked for me to change the way their website looks when it is being printed out. The site itself was using very basic css, is still using tables for alignment, and has a flash header at the top of all the pages. I have never needed to stylize the way a web page prints so I was quite new to this. I did however know it could be done using an alternate css sheet.

So I was off to search for my answers, I quickly came across 4 or 5 crappy attempts at explaining these alternate style sheets, and after piecing information together and some trial and error I managed to figured it out. Its turned out to be very simple for a basic site like the one I was editing. I could see how a much larger site such as my osguide.net would be a little tougher, and take longer. So that will wait until another day.

Regardless it all starts with a simple 1 line of code to call my new style sheet when the page is being printed:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Its your normal call to an external CSS page except I changed the media to print, instead of screen.

That’s all fine and dandy, my new sheet is called only when I print the page out. Now the more annoying problems popped up, no background images were printed, as well as no flash. I expected the flash not be printed, but I figured it would print background images.

I did not want to print the navigation so I set the display for my navigation to none. The CSS for that is simple:

display:none;

So my next goal is to get the flash to print. Up until now I have only been looking at the print preview in Opera, and so I decided it was time to take a look at in IE 7, Firefox 2 and Safari 3. IE 7 does print the flash, so does Firefox, but safari does not. This is definitely a large problem.

So I have Opera and Safari without a header, and IE 7 and FF with a header on the print previews. I am not one for CSS hacks, or alternate style sheets, so I had to come up with a different way to properly display my page.

I checked out a couple work-around’s using lists but they did not seem to work like they said it should… go figure. So I had to resort to a pretty lame workaround, until the browsers themselves get on the same page, or I find a better way to do this.

I ended up placing two new div tags. The first one around my flash header and the second around a new jpeg image right above my flash with a display of none.

So Now on my screen css I have a hidden image right above my flash, and then on the print css I hide my flash. This seems like a crappy work-around, but it works in all browsers without any css hacks.

My question now is does anyone else have a better way to do this without css hacks, or alternate style sheets? I know this can’t be the best way.