Member Avatar for Unebrion

I'm having trouble with classes and the display element. I need to display elements of a class in my html document as list items.
i have 9 of these in the document, all basically the same

<div class="notes" id="point0">
			<a href="longs.htm" style="position: absolute; left: 560; top: 60;">
            <img src="image0.jpg" alt="" />
            <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></a>
      </div>

at the top of the document i have 2 embedded style sheets. I'm having issues with the one for printing.

<style type="text/css" media="print">

		.notes 
			{
				display: list-item;
				list-style-type: disc;
				font-family: sans-serif; 
				font-size: 12pt;
			}	
	</style>

what I don't understand is why it isn't displaying this as a list. I should also mention this is an assignment for school so if that is an issue, could someone please point me to an example of something similar thanks for any and all help.
~edit~
I thought I would mention that it currently doesn't output anything

Edited by Unebrion because: n/a
  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Unebrion

Dani AI

Generated

A few concise pointers that explain why the print stylesheet can look like it "does nothing" and what to check next.

The HTML you posted shows two immediate problems that commonly break print output. First, the inline style uses left: 560; top: 60; without units — CSS requires units (for nonzero values) so those rules are invalid and ignored. Second, wrapping block elements (for example a p) inside an anchor is not valid in older HTML/XHTML doctypes (it is valid in HTML5), and can produce unexpected layout results when browsers reflow for print. ’s fix (moving positioning out of the inline style into a stylesheet) is exactly the right direction because it makes the layout rules easier to override for print.

About list markers: ’ point is useful but incomplete. list-style-type only affects list items — that includes real li elements and any element with display: list-item. Browsers vary in how they render markers for non‑li elements, and many CSS resets remove markers globally. To be consistent and accessible, prefer real semantic lists (ul/li) for things that are lists rather than relying on display: list-item.

Quick troubleshooting checklist:

  • Use your browser’s DevTools to emulate print media and inspect computed styles; confirm the element actually has display: list-item and no later rule overrides list-style.
  • Ensure the print stylesheet is loaded/applied after any reset rules or increase selector specificity for print rules.
  • Remove or neutralize absolute positioning for print (reset position to static/unset in the print stylesheet) because absolute children can change flow and hide markers.
  • Add left padding/margin or list-style-position: outside if the marker is rendered but not visible.

For authoritative references see MDN on the display property, list-style and @media print:

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

The list-style-type applies only to a <ul> or <ol> tag, as you can read here:

Member Avatar for Unebrion

I actually figured my problem out. I had to take the positioning out of the links itself and make them part of my first style sheet and after a few more changes got everything working

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.