lists applied to different media types

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Hi all. I am trying to get a class of elements to display as a bulleted list when it is printed. I know I want an unordered list and I have to mark each element with a tag but what is happening is when I insert the tags in the html section they are being applied to my screen output as well as to my print output. I am using the syntax, .notes ul in my stylesheet for my print output section. Is there a line I need to add to my screen output stylesheet to prevent what is happening there? Or is it the placement of the tags in the html code that is screwing me up? I am using embedded stylesheets. I appreciate it if someone can help with this. Thanks.
Here is my code:
<html>
<head>

Filename: longs.htm
Supporting files: image.jpg - image9.jpg, lpmap.jpg
-->
<title>Longs Peak Online Map</title>

<style type="text/css" media="print">
body {font-family: sans-serif;}
#online_map a:link {text-decoration: none}
#online_map a:visited {text-decoration: none}
#online_map a:hover {text-decoration: none}
#online_map a:active {text-decoration: none}
#instruction {display: none}
h2 span {display: none}
.notes img {display: none}
.notes span {font-weight: bold}
h2:after {content: " Trail Itinerary"}
.notes ul {list-style-type: disc; margin: 20px}
.notes p {display: inline;}

</style>

<style type="text/css" media="screen, tv">
body {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
h2 {margin-top: 0px}
img {border-width: 0px; display: block}
#summary {width: 600px; margin-bottom: 20px}
#online_map {width: 600px; height: 294px; border-style: solid; border-width: 1px;
background: url(lpmap.jpg); position: relative; left: 0; top: 0}

#online_map a:link {text-decoration: none}
#online_map a:visited {text-decoration: none}
#online_map a:hover {text-decoration: none}
#online_map a:active {text-decoration: none}
.notes p {font-size: 8pt; margin: 5px}
.notes span {color: yellow}
.notes a {width: 20px; height: 20px; overflow: hidden; color: #FFFFFF;
background-color: #0000FF; z-index: 1}

.notes a:hover {width: 150px; height: 170px; overflow: visible; z-index: 2}

#point0 a {position: absolute; left: 560px; top: 60px}
#point1 a {position: absolute; left: 277px; top: 90px}
#point2 a {position: absolute; left: 175px; top: 60px}
#point3 a {position: absolute; left: 110px; top: 115px}
#point4 a {position: absolute; left: 55px; top: 165px}
#point5 a {position: absolute; left: 5px; top: 180px}
#point6 a {position: absolute; left: 15px; top: 222px}
#point7 a {position: absolute; left: 50px; top: 245px}
#point8 a {position: absolute; left: 100px; top: 245px}
#point9 a {position: absolute; left: 90px; top: 220px}

</style>

</head>

<body>
<div id="summary">

<h2>Longs Peak <span>Online Trail Map</span></h2>

<p>
At 14,255 feet, Longs Peak towers above all other summits in Rocky Mountain
National Park. The summer is the only season in which the peak can be climbed
by a non-technical route. Early mornings break calm, clouds build in the
afternoon sky, often exploding in storms of brief, heavy rain, thunder and
dangerous lightning. Begin your hike early, way before dawn, to be back below
timberline before the weather turns for the worse.
</p>
<p>
The Keyhole Route, Longs Peak's only non-technical hiking pathway, is a 16
mile round trip with an elevation gain of 4,850 feet. Though non-technical,
the Keyhole Route is still challenging and is not recommended for those who
are afraid of heights or exposed ledges. Hikers should be properly outfitted
with clothing, food and water. Use caution when ascending or descending steep
areas. Don't be afraid to back down when bad weather threatens.
</p>
<p id="instruction">
Move your mouse pointer over the numbered landmarks in the map to preview the hike.
</p>
</div>

<div id="online_map">

<ul><div class="notes" id="point0">
<a href="longs.htm"><img src="image0.jpg" alt="" />
<li><p>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
nine miles south of Estes Park. Be sure to pack food, extra water,
sunblock, and warm clothes, gloves, and caps.
</p></li></a>
</div></ul>

<div class="notes" id="point1">
<a href="longs.htm"><img src="image1.jpg" alt="" />
<p>
<span>5:30 a.m.</span> Stop at Mills Moraine for a view of the
sunrise.
</p></a>
</div>

<div class="notes" id="point2">
<a href="longs.htm"><img src="image2.jpg" alt="" />
<p>
<span>7:30 a.m.</span> Time for break at Granite Pass.
</p></a>
</div>

<div class="notes" id="point3">
<a href="longs.htm"><img src="image3.jpg" alt="" />
<p>
<span>8:30 a.m.</span> Climb through the Boulder Field on the
way to the Keyhole.
</p></a>
</div>

<div class="notes" id="point4">
<a href="longs.htm"><img src="image4.jpg" alt="" />
<p>
<span>9:00 a.m.</span> Stop at the
Agnes Vaille shelter for a well-deserved breakfast.
</p></a>
</div>

<div class="notes" id="point5">
<a href="longs.htm"><img src="image5.jpg" alt="" />
<p>
<span>9:30 a.m.</span> It's time to go through
the Keyhole. Be prepared for heavy winds.
</p></a>
</div>

<div class="notes" id="point6">
<a href="longs.htm"><img src="image6.jpg" alt="" />
<p>
<span>10:00 a.m.</span> Follow the painted targets along the Ledges.
</p></a>
</div>

<div class="notes" id="point7">
<a href="longs.htm"><img src="image7.jpg" alt="" />
<p>
<span>11:00 a.m.</span> Take special care when crossing the Narrows.
</p></a>
</div>

<div class="notes" id="point8">
<a href="longs.htm"><img src="image8.jpg" alt="" />
<p>
<span>11:15 a.m.</span> You're almost there! Climb the Homestretch
to reach the summit.
</p></a>
</div>

<div class="notes" id="point9">
<a href="longs.htm"><img src="image9.jpg" alt="" />
<p>
<span>11:45 a.m.</span> Congratulations, you've reached the top!
Time for lunch and a few photos.
</p></a>
</div>

</div>

</body>
</html>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Easiest way would be to set up a separate print CSS and use this between the head tags:

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

I have to stick with embedded stylesheets for my page, is there no way to keep the bullets from displaying in my screen output?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Possibly try using @media print:

Example:

@media print {
h1 {
color: black;
}
h2 {
color: gray;
}
}

I doubt this will work for you as any other selector or class that appears after any print styling will take effect. That's why the use of an external print css or separate file for printing only.

Either that are set a Print link to an HTML file that contains all that you want to print.

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Okay I' will give it a try and see what happens. I'll let you know how I make out. Thanks for your help, I appreciate it.

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Okay I finally got it. Please bear with me guys, I am a newbie for sure. In case anyone else ever wants to do this like I did here it is: I added one line of code to my stylesheet for print media. Since the entire class can be a list, there is no need to do anything to the HTML code. I took the list tags out and put in this code in my CSS for print output:
.notes {display: list-item; list-style-type: disc; margin: 20px}
That did the trick!
Thanks for your help. I love that I have a place to come for help. You guys rock!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1391 Location: Biloxi, MS

Sure glad to hear you got it solved! Very Happy