Unordered list help!

HTML & CSS
1

I am creating an unordered list and using images as backgrounds for the <li> tag, however in IE it shows a duplicate image… I only placed the background in there once… so I’m not sure what’s going on…

#about {		background-image:url('images/MainNavSml.png');
			background-repeat:no-repeat;
			width:160px;
			height:40px;
			text-align:right;
			margin-left:-100px;
			}
			
#about p { 	padding:10px;
			font-size:18px;
			font-family:  'Cuprum', arial, serif;
			color:#60a691;}
			
#programs {		background-image:url('images/MainNavSml.png');
			background-repeat:no-repeat;
			width:160px;
			height:40px;
			text-align:right;
			margin-left:-100px;
			margin-top:-20px;
			}		

#programs p { 	padding:10px;
			font-size:18px;
			font-family:  'Cuprum', arial, serif;
			color:#8ab358;}			

#photo {		background-image:url('images/MainNavSmlOrange.png');
			background-repeat:no-repeat;
			width:160px;
			height:40px;
			text-align:right;
			margin-left:-100px;
			margin-top:-20px;
			}		

#photo p { 	padding:10px;
			font-size:18px;
			font-family:  'Cuprum', arial, serif;
			color:#da732b;}

#contact {	background-image:url('images/MainNavSmlRed.png');
			background-repeat:no-repeat;
			width:160px;
			height:40px;
			text-align:right;
			margin-left:-100px;
			margin-top:-20px;
			}		

#contact p { padding:10px;
			font-size:18px;
			font-family:  'Cuprum', arial, serif;
			color:#ce4a48;}

and

<ul id="left_nav">
				<li id="about"><a href="#"><p>about us</p></a></li>
				<li id="programs"><a href="#"><p>programs &amp; services</p></a></li>
				<li id ="photo"><a href="#"><p>photo gallery</p></li>
				<li id ="contact"><a href="#"><p>contact us</p></li>
			</ul>
2

Hi Welcome to Sitepoint :slight_smile:

You have some errors in your html which may be causing you some problems.

Firstly you can’t put a p element inside an anchor. Anchors can only contain block elements (unless you are using html5 and even then I advise against it).

You also have two closing anchors missing.

It doesn’t look like you need the p tag anyway as you can apply the styles directly to the anchor and set it to display:block with css.

Your css is overcooked and we can reduce that to about 20% of what you had by removing all the duplicate rules like so.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#left_nav{
    margin:0;
    padding:0;
    list-style:none;
}
#left_nav li{    
    width:160px;
    height:40px;
    text-align:right;
    margin:-20px 0 0 -100px;/* this seems odd */
    position:relative;
}
#about {background:url(images/MainNavSml.png) no-repeat;}
#programs {background:url(images/MainNavSml.png) no-repeat;}
#photo {background:url(images/MainNavSmlOrange.png) no-repeat;}
#contact {background:url(images/MainNavSmlRed.png) no-repeat;}
#about a {color:#60a691;}
#programs a {color:#8ab358;}
#photo a {color:#da732b;}
#contact a {color:#ce4a48;}
#left_nav a{
    display:block;
    padding:10px;
    font-size:18px;
    font-family:  'Cuprum', arial, serif;
    text-decoration:none;
}
</style>
</head>
<body>
<ul id="left_nav">
    <li id="about"><a href="#">about us</a></li>
    <li id="programs"><a href="#">programs &amp; services</a></li>
    <li id="photo"><a href="#">photo gallery</a></li>
    <li id="contact"><a href="#">>contact us</a></li>
</ul>
</body>
</html>

Having said all that I have no idea if it will solve the problem as I don;t have access to the images and can’t see what its supposed to look like and indeed which version of IE you were having problems with :slight_smile:

I can say that this line strikes me as odd:


margin-left:-100px;
margin-top:-20px;

I’m wondering why you need that and if you just haven’t forgotten to clear the margins and padding on the ul and the p elements.

If none of that solves the problem then post a link or attach a working zip with some images so we can see where we are :slight_smile:

3

hmm… yah, I have a lot of excess… here are the files. The page I’m working with is “project.html” project.rar

4

Hi,

The comments and observations I made earlier are all correct and will address the issues you were having.

You should remove the IE only file as it is not needed once you address the issues already mentioned.

Here is the revised html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Asotin County Community Services</title>
<meta name="Keywords" content="Enter Keywords Here" />
<meta name="Description" content="Enter Description Here" />
<link href='http://fonts.googleapis.com/css?family=Cuprum&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:light&v1' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/ico" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="navigation">
            <ul id="top_nav">
                <li><a href="#">home</a> |</li>
                <li><a href="#">programs &amp; services</a> |</li>
                <li><a href="#">photo gallery</a> |</li>
                <li><a href="#">about us</a> |</li>
                <li><a href="#">contact us</a></li>
            </ul>
        </div>
        <div id="branding">
        <h1><span class="push_right">asotin county</span><br/>
        <span class="special_move"><span class="special_bold">community</span> <span class="large">SERVICES</span></span></h1>
        <h2 class="tagline">HELPING Individuals with LEARNING DISABILITIES<br/>
        SUCCEED in school, life &amp; work</h2>
        </div>
        <div id="main_nav" class="clear">
            <ul id="top_level">
                <li id="about"><a href="#">about us</a></li>
                <li id="programs"><a href="#">programs &amp; services</a>
                    <ul>
                        <li><a href="#">Supported Living</a></li>
                        <li><a href="#">Employment Services</a></li>
                        <li><a href="#">Prevention &amp; Treatment Services</a></li>
                        <li><a href="#">Birth to Three Program</a></li>
                    </ul>
                </li>
                <li id="photo"><a href="#">photo gallery</a></li>
                <li id="contact"><a href="#">contact us</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

and the revised CSS:


body {
    background-image:url('Images/BackgroundSilver.jpg');
}
h1 {
    font-family: 'Josefin Slab', arial, serif;
    font-weight:bold;
    color:#fff;
}
a:link, a:active, a:visited {
    color:#000;
    text-decoration:none;
}
.sub_level a:active, a:visited {
    color:#000;
    text-decoration:none;
}
#wrapper {
    width:100%;
}
#header {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    left:0px;
    right:0px;
    top:0px;
    width:820px;
    height:450px;
    background-image:url('Images/RoadImage.jpg');
}
#navigation {
    width:100%;
}
#top_nav {
    position:relative;
    float:right;
    padding-right:50px;
}
#top_nav li {
    font-family: "Cuprum", arial, serif;
    font-size:14px;
    color:#000;
    display:inline;
    list-style-type:none;
}
#branding {
    display:block;
    margin:75px auto;
    line-height:34px;
}
#main_nav {
    margin-top:-50px;
}
#top_level a:link {
    text-decoration:none;
}
#top_level,#top_level ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
#top_level a {
    display:block;
}
#top_level {
    margin:0;
    padding:0;
    list-style:none;
    font-family:  'Cuprum', arial, serif;
}
#top_level li {
    width:160px;
    height:40px;
    text-align:right;
    margin:0px 0 0 -100px;
    position:relative;
}
#about {background:url(Images/MainNavSml.png) no-repeat;}
#programs {background:url(Images/MainNavSml.png) no-repeat;}
#photo {background:url(Images/MainNavSmlOrange.png) no-repeat;}
#contact {background:url(Images/MainNavSmlRed.png) no-repeat;}
#about a {color:#60a691;}
#programs a {color:#8ab358;}
#photo a {color:#da732b;}
#contact a {color:#ce4a48;}
#top_level a {
    display:block;
    padding:0 10px;
    font-size:18px;
    text-decoration:none;
    height:40px;
    line-height:40px;
}
#top_level ul {
    text-align:left;
    margin-left:-999em;
    background:url('Images/NavigationBox.png') no-repeat;
    width:270px;
    height:150px;
    display:block;
    position:absolute;
    left:155px;
    top:-55px;
}
#top_level li:hover ul {margin:0}
#top_level li:hover ul li{
    width:auto;
    height:auto;
    text-align:left;
    margin:0;
}
#top_level li:hover ul a {
    display:block;
    padding:0;
    text-decoration:none;
    height:auto;
    line-height:35px;
    font-size:18px;
    color:#000;
    margin:3px 0 0 30px;
}
#top_level ul li a:hover {
    color:#da732b;
}
.tagline {
    font-family: "Cuprum", arial, serif;
    text-align:right;
    margin-top:-10px;
    font-size:18px;
    color:#fff;
    line-height:16px;
    margin-right:75px;
}
.clear {
    clear:both;
}
.push_right {
    margin-left:100px;
}
.special_bold {
    font-weight:bolder;
    font-family:  'Cuprum', arial, serif;
    font-size:76px;
}
.large {
    font-size:70px;
}
.special_move {
    text-align:center;
    margin-left:75px;
    letter-spacing:2px;
}

I assumed you weren’t supporting IE6 as you had nothing in plcae for it.

5

I immediately let out a groan when I saw the size of the download – one that was confirmed when loading the page. Here’s a tip, I don’t care how pretty that road is, it’s not worth twice the upper limit in kb I’d even allow an entire page on a site to reach!!!

Paul is quite correct in it needing a rewrite that actually follows the structural rules of HTML – but really he didn’t throw away NEARLY enough of the pointless/worthless bloat. He said the CSS is overcooked – as I always say CSS is only as good as the HTML it’s applied to, which is why IMHO that HTML needs a good hefty pruning. Scary when I’m predicting a 25-33% reduction in code on something that’s only 2.21k to start with – but it’s indicative of the “not every ejaculation deserves a name” scenario, where you not only have divitus (wrapping div around everything for no good reason), but classes/ID’s on everything too.

Though I’m hard pressed to say what the page should even look like, given I’m seeing four different layouts in four different browsers. I’m going to assume the one in FF is what you are aiming for. (you certainly wouldn’t be trying to do what IE and Opera are doing to it here).

So first, let’s clean up the markup. It’s got a NASTY case of “not every ejaculation deserves a name” with all the extra DIV for nothing… the inlined dividers aren’t necessary and are non-semantic in their inclusion… Of course google’s font api is cute, I’d suggest ripping it out for REAL webfonts. (Font squirrel being the best of the lot)

For what you are doing, there is little reason for your HTML so far to be much more than:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Asotin County Community Services
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Asontin County
		<span>Community <span>Services</span></span><br />
		<small>
			HELPING Individuals with LEARNING DISABILITIES<br/>
			SUCCEED in school, life &amp; work
		</small>
	</h1>

	<ul id="topMenu">
		<li><a href="#">home</a></li>
		<li><a href="#">programs &amp; services</a></li>
		<li><a href="#">photo gallery</a></li>
		<li><a href="#">about us</a></li>
		<li class="last"><a href="#" >contact us</a></li>
	</ul>

	<ul id="sideMenu">
		<li class="about"><a href="#">about us</a></li>
		<li class="programs">
			<a href="#">programs &amp; services</a>
			<ul>
				<li><a href="#">Supported Living</a></li>
				<li><a href="#">Employment Services</a></li>
				<li><a href="#">Prevention &amp; Treatment Services</a></li>
				<li><a href="#">Birth to Three Program</a></li>
			</ul>
		</li>
		<li class="photo"><a href="#">photo gallery</a></li>
		<li class="contact"><a href="#">contact us</a></li>
	</ul>

<!-- #pageWrapper --></div>

</body></html>

With EVERYTHING else you are trying to do there easily enough handled from inside the CSS.

If I have time later and senility doesn’t strike, I’ll belt out the CSS that would make that work.

Oh, can I assume there will be actual content on said page, and not just one heading and lists? “As is” that’s treading into splash page territory.

6

Thank you so much for all of your input, and yes there will be content added. I’m still a student trying to clean up everything I do, looks like I still need some work!

7

Trust me, even after 8 years of doing websites “for real” and 35 years of programming computers, there’s ALWAYS a bit of “trying to clean up everything you do” – computers are a fast moving field where 3 years is obsolete, 6 years is the scrap-heap. There will ALWAYS be something new to learn.

… and the day you stop learning is the day the rest of the world leaves you behind.

From what I saw you fell into a few of the classic blunders I even see so called “experts” in the field make from time to time. The biggest was just putting DIV in around everything, even when you had a perfectly good block level tag to accept the styling. You see that all the time with things like div#header around a H1 and UL for no reason, or div#nav around a perfectly good UL. The extra DIV to group like tags is handy, and can often let you avoid using excess classes, but it should only be used when you need it, and not “just because”.

Though I suspect there’s a common set of books and/or tutorials out there people are just copying and/or learning these bad practices from.

Some of what I consider mistakes others in the field would not – for example I would never use alpha transparent .png in the manner you did for the menu; I’d never use a giant image like that (though with some real compression on that jpeg you could cut the filesize by half or more).

But I’m generally considered a fringe whacko for setting limits on my page sizes (70k ideal, 140k maximum – that’s HTML+CSS+IMAGES+SCRIPTS!) – but usually the fast loading results are popular with users and the cheap to host and lower bandwidth consumption speaks to the wallet of site owners much more than any flashy graphic ever could.

After all, people visit websites for the content, NOT the goofy graphics we hang around the content.

8