SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List items wont style :-(

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

    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 :-(

    Heres is the HTML
    Code:
    <!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:
    Code:
    /* -----------------------------------
    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 :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    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. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-(

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    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.
    Oooops I'll check file path...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •