6 replies [Last post]
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>

Hugo
Hugo's picture
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

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?

Tyssen
Tyssen's picture
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

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.

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.

Hugo
Hugo's picture
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.

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