List items wont style :-(

HTML & CSS
1

Good morning from dull and overcast 8 degrees C York UK :slight_smile:

Here is my CSS problem…

On this page http://www.davidclick.com/page.htm the list items wont style ie the css relating to them isnt doing anything to the list elements :frowning:

Heres is the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta name="robots" content="noindex, follow">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Welcome | The Balloon shop</title>
	<meta name="Description" lang="en" content="DESCRIPTION">
	<meta name="Keywords" lang="en" content="KEYWORDS">
	<link rel="shortcut icon" href="/favicon.ico">
	<meta name="Distribution" content="global">
	<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="css/master.css" />
	<!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen"><![endif]-->
	<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen"><![endif]-->
	<!--[if IE 8]><link rel="stylesheet" href="ie8.css" type="text/css" media="screen"><![endif]-->
</head>
<body>
<div class="container">
	<div class="header">
		<h1>
			<a href="#"><img src="images/logo.gif" alt="The Balloon shop"></a>
		</h1>
		<a class="structural" href="#content">Skip to main content</a>
		<div class="search-form">
			<form action="#" method="get">
				<div>
					<label class="structural" for="search">Search the site</label>
					<input class="search" name="search" id="search" type="text">
					<input class="search-button" name="search-button" id="search-button" type="image" src="images/search.gif" alt="search">
				</div>
			</form>
		</div>
		<div class="primary-nav">
			<h3 class="structural">
				Site navigation
			</h3>
			<ul>
				<li><a class="home" href="#"><span>Home</span></a></li>
				<li><a class="about" href="#"><span>About us</span></a></li>
				<li><a class="news" href="#"><span>Latest news</span></a></li>
				<li><a class="buy" href="#"><span>Buy balloons online</span></a></li>
				<li><a class="contact" href="#"><span>Contact us</span></a></li>
			</ul>
		</div>
	</div>
	<div class="content-container">
		<div class="section-nav">
			<h3 class="structural">
				Section navigation
			</h3>
			<ul>
				<li><a href="#"><span>About us</span></a></li>
				<li><a href="#"><span>Our staff</span></a>
					<ul>
						<li><a href="#"><span>Jeff Smith</span></a></li>
						<li><a href="#"><span>Penny Yang</span></a></li>
						<li><a href="#"><span>Mary Jackson</span></a></li>
					</ul>
				</li>
				<li class="current"><a href="#"><span>Our history</span></a></li>
				<li><a href="#"><span>Store locations</span></a></li>
			</ul>		
		</div>
		<div class="content gutter">
			<a name="content"></a>
			<h2>
				Our history
			</h2>
			<div class="box about intro">
				<div class="inner">
					<p>
						The Balloon Shop was proud to support a series of local councils celebrate their bicentenary this weekend with a range of events at local parks. We were able to provide all the balloons for these events.
					</p>
				</div>
			</div>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<h3>
				Page heading - h3
			</h3>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<h4>
				Page heading - h4
			</h4>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
			<h5>
				Page heading - h5
			</h5>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
			<ul>
				<li>Duis autem vel eum iriure dolor</li>
				<li>Hendrerit in vulputate velit esse molestie consequat</li>
				<li>Vel illum dolore eu feugiat nulla </li>
				<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril</li>
				<li>Dignissim qui blandit praesent luptatum zzril delenit </li>
				<li>Augue duis dolore te feugait nulla facilisi</li>
			</ul>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
			<ol>
				<li>Duis autem vel eum iriure dolor</li>
				<li>Hendrerit in vulputate velit esse molestie consequat</li>
				<li>Vel illum dolore eu feugiat nulla </li>
				<li>Facilisis at vero eros et accumsan et iusto odio </li>
				<li>Dignissim qui blandit praesent luptatum zzril delenit </li>
				<li>Augue duis dolore te feugait nulla facilisi</li>
			</ol>
		</div>
		<div class="sidebar gutter">
			<div class="box contact">
				<div class="inner">
					<h4>
						<a href="#">Check our balloons!</a>
					</h4>
					<p>
						Did you know we have over 500 different types of balloons in stock?
					</p>
				</div>
			</div>
			<div class="box home">
				<div class="inner">
					<h4>
						<a href="#">Our online store</a>
					</h4>
					<p>
						Don't have time to come into one of our stores? Why not buy online?
					</p>
				</div>
			</div>
			<div class="box news">
				<div class="inner">
					<h4>
						<a href="#">Contact us</a>
					</h4>
					<p>
						Do you have a question about balloons? Why not contact us now so that we can help.
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footer-decoration"></div>
		<h3 class="structural">
			Footer information
		</h3>
		<ul>
			<li><a href="#">Contact us</a></li>
			<li><a href="#">Legal information</a></li>
			<li>Copyright &copy; 2010</li>
		</ul>
	</div>
</div>
</body>
</html>

And here is the CSS:

/* -----------------------------------
Site:       The Balloon Shop
CSS author: Russ Weakley
Updated:	Date here
Updated by: Date here
----------------------------------- */

/* -----------------------------------
simple reset
----------------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

fieldset, img { border: 0; }
legend { color: #000; }

input, textarea, select, button
{
	font-size: 110%;
	line-height: 1.1;
	font-family: helvetica, arial, sans-serif;
}

button
{
	width: auto;
	overflow: visible;
}

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

ul li { list-style: none; }

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

pre, code
{
	font-family: "Courier New", monospace, serif;
	font-size: 100%;
	line-height: 1.2;
}

/* -----------------------------------
elements
----------------------------------- */

body
{
	color: #000;
	background: #fff;
	font: 90%/1 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 .5em;
	color: #c40000;
}

h1 { font-size: 200%; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }
h6 { font-size: 100%; }

p
{
	margin: 0 0 1.5em;
	line-height: 1.4;
}

a:link { color: #0f3163; }
a:visited { color: #04214b; }

a:focus
{
	color: #000;
	outline: thin dotted;
}

a:hover { color: #000; }
a:active { color: red; }

.content ol
{
	line-height: 1.4;
	padding: 0 0 1.5em 40px;
}

.content ul
{
	line-height: 1.4;
	padding: 0 0 1.5em 20px;
}

.content li { margin: 0 0 .3em; }

.content ul li
{
	padding: 0 0 0 20px;
	background: url(../images/bullet.gif) no-repeat 0 .3em;
}

/* -----------------------------------
layout
----------------------------------- */

/* -----------------------------------
header
----------------------------------- */

/* -----------------------------------
search-form
----------------------------------- */

/* -----------------------------------
primary-nav
----------------------------------- */

/* -----------------------------------
section-nav
----------------------------------- */

/* -----------------------------------
footer
----------------------------------- */

/* -----------------------------------
box
----------------------------------- */

/* -----------------------------------
colors
----------------------------------- */

/* -----------------------------------
classes
----------------------------------- */

.structural
{
	position: absolute;
	left: -500em;
}

.gutter { margin-left: 20px; }

I wonder has a section of the CSS reset causing it not to work?

Any insights welcome :slight_smile:

2

Hi,

I’m a little confused as the css above doesn’t seem to be added to the site in question. :slight_smile:

The reset does set the lists to none so you will need to set them to disc and give them a left margin for the bullet to show.

3

Haven’t you asked Russ himself; as that is part of his course material?

Though I suspect your path or file is wrong because if you download the CSS you posted and XHTML it works just fine.

I believe you are linking to an older CSS file because your “live version” differs to what you’ve posted here - hence the difference.

4

Hi Paul…

Thank you for responding so quickly. Yes I can see while it looks confusing but here goes ( I bolted the page on the back of an existing site)

This page http://www.davidclick.com/page.htm is wired upto this CSS file
<link rel=“stylesheet” type=“text/css” href=“css/master.css” />

Ive looked at the CSS reset and my dumb eyes can only spot the following code that influences the lists:

ul li { list-style: none; }
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}

So I still cant see why the master.css file isnt doing its stuff :frowning:

Any insights welcome :slight_smile:

5

:blush: Oooops I’ll check file path…

6

Thank you Sitepoint problem solved. The damn CSS file wasnt updated on the server. Off topic Russ’ Weakley’s daily CSS live courses are damn fine. The Guy cracks CSS layout theory in a way which Ive been wanting for a long time :slight_smile: