unordered list CSS issue.

6 replies [Last post]

Mon, 2011-03-07 19:53

ParanoidAndroid

Offline

newbie

Last seen: 8 years 35 weeks ago

Joined: 2011-03-07

Posts: 4

Points: 7

Hi fellow CSS folks,

A really quick and newbie question; for some strange reason my CSS code doesn't seem to be working regarding my unordered list (I'm trying to get it to display horizontal and without bullet points)
I'm wondering if it's a small typo on my part, or perhaps a specificity issue?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<HTML>
 
	<HEAD>
	<TITLE>AN ATTEMPT </TITLE>
	<STYLE>
 
	BODY {
	margin:0;
	}
 
	#header {
	border-bottom: 1px solid #fff;
	background: #131313   ;
 	}
 
	#logo {
	width: 284px;
	height: 122px;
	position: absolute;
	left: 42px;
	top: 0px;
	}
 
	#logoContainer {
	height: 106px;
	}
 
	#navBar {
	height: 42px;
	background: #5E5E5E;
 
	#navList ul {
	list-style-type: none;
	}
 
	#navList li{
	display: inline;
	}
 
 
 
	</STYLE>
	</HEAD>
 
	<BODY>
 
	<div id = "header">
 
	<div id ="logoContainer"> <img id="logo" src ="logo.png" /> </div>
 
	<div id ="navBar">
 
	<ul id ="navList">
		<li>Link</li>
		<li>Link</li>
		<li>Link</li>
		<li>Link</li>
	</ul>
 
      </div>
 
 
 
	</div>
	</BODY>
 
 
 
</HTML>

Tags:

Beginners CSS Questions

Mon, 2011-03-07 20:44

Hugo

Offline

Moderator

London

Last seen: 4 years 45 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

#navList ul Your ul is

#navList ul

Your ul is #navList you have said that the ul is a descendent of an element #navList

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Mon, 2011-03-07 23:21

ParanoidAndroid

Offline

newbie

Last seen: 8 years 35 weeks ago

Joined: 2011-03-07

Posts: 4

Points: 7

Thanks for the speedy

Thanks for the speedy response! I do see now the issue with my original code.

That being said the following still doesn't seem to work for me:

        #navBar ul {
	list-style-type: none;
	}
 
	#navBar li{
	display: inline;
	}

Isn't this any li/ul that descends from a element named navBar right?

Tue, 2011-03-08 00:27

Tyssen

Offline

Moderator

Brisbane

Last seen: 5 years 5 weeks ago

Brisbane

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8201

Points: 1386

Validate your CSS; you're

Validate your CSS; you're missing the closing bracket after #navBar.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tue, 2011-03-08 13:38

ParanoidAndroid

Offline

newbie

Last seen: 8 years 35 weeks ago

Joined: 2011-03-07

Posts: 4

Points: 7

Tyssen wrote: Validate your

Tyssen wrote:

Validate your CSS; you're missing the closing bracket after #navBar.

I am? (you're referring to the curly brace right) I've just ran this through the W3C CSS validator and it doesn't seem to pick any stray brackets up. Sorry if this seems like I'm just being stupid.

Tue, 2011-03-08 13:42

ParanoidAndroid

Offline

newbie

Last seen: 8 years 35 weeks ago

Joined: 2011-03-07

Posts: 4

Points: 7

Ah! discard my last comment.

Ah! discard my last comment. I now see what you meant with the missing bracket. Thank you so much for the help.

Wed, 2011-03-09 09:32

Hugo

Offline

Moderator

London

Last seen: 4 years 45 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

ParanoidAndroid wrote: Thanks

ParanoidAndroid wrote:

Thanks for the speedy response! I do see now the issue with my original code.

That being said the following still doesn't seem to work for me:

        #navBar ul {
	list-style-type: none;
	}
 
	#navBar li{
	display: inline;
	}

Isn't this any li/ul that descends from a element named navBar right?

Yes it is any ul/li that has a parent or antecedent/ancestor named #navBar do you need to be careful when using descendent selectors or else use '>' the direct child combinator or just ensure the ul is specified with a token identifier to allow more exacting reference.

unordered list CSS issue.

#navList ul Your ul is

Thanks for the speedy

Validate your CSS; you're

Tyssen wrote: Validate your

Ah! discard my last comment.

ParanoidAndroid wrote: Thanks

User login

Navigation