CSS not overriding <ul> format

[digitalentropy]

I have a .css that should override the standard formatting for the <ul><li> tags, but it isn't doing so. I'm not adept at .css as this is my first adventure into style sheets (and it's using a public code found on the internet). The .css is shown below:

>>>>
/* expandable list with alternate switch symbol */

ul.altsym {
display: none;
margin: 0;
padding: 0;
}

ul.altsym ul {
display: none;
margin: 0;
padding-left: 15px;
}

ul.altsym li {
list-style-type: none;
position: relative;
width: 100%;
}

ul.altsym a {
display: none;
padding: 2px;
text-decoration: none;
}

html>body ul.altsym a { width: auto; } /* hidden from Win/IE */

ul.altsym a:hover {
background-color: #eee;
border: 1px solid #3874d1;
}

ul.altsym a.switch {
background: transparent url("http://www.digital-entropy.net/images/arrows.gif") no-repeat top left;
border: none;
height: 10px;
left: 6px;
line-height: 0px; /* Win/IE needs this for some reason */
margin: 0;
padding: 0;
text-indent: -500px;
top: 0.7ex;
position: absolute;
width: 10px;
}

ul.altsym a.switch:hover {
background-color: transparent;
border: none;
}

ul.altsym a.on { background-position: bottom left; }
ul.altsym a.off { background-position: top left; }

/* Box-model hacks for Win/IE 5.5 \*/
* html ul.altsym { width: 202px; w\idth: 177px; }
* html ul.altsym a { margin-left: 0px; ma\rgin-left: 17px; }
* html ul.altsym a.switch { left: -11px; lef\t: 6px; }
/* end hacks */

<<<

I was playing around with the .css file to see if I would notice the changes, but I didn't see anything. I was playing with the 'display' variable (i.e. I set them to display: none; ).

I include the .css and .js files like this:

>>>
<title>gazingus.org - DOM-Scripted Lists, Revisited</title>
<link rel="stylesheet" type="text/css" href="Scripts/barebones.css">

<script type="text/javascript" src="Scripts/expandable.js"></script>
<<<

I call the .css (barebones.css) and my .js (expandable.js) files like this:

<ul barebones expandable>


The page can be found here: http://www.digital-entropy.net/List_test.html


Any suggestions?
(by the way, I owe credit to Lindquist for the .css and .js files)

[NogDog]

In your HTML, change this...

<ul class="barebones expandable">

...to this...

<ul class="altsym">

...since "altsym" is the class name you're using in your stylesheet.

[digitalentropy]

So, I named the .css file 'barebones', but inside the file the 'altsym' is used and this is what I call in the <ul> tag.

[NogDog]

The CSS file's name is only of importance to the <link rel="stylesheet" type="text/css" href="Scripts/barebones.css"> line where you load the stylesheet. The selectors within the stylesheet itself such as ul.altsym are tied to the actual element within the HTML markup via the name or id parameter within the HTML tag you want to be styled. Use <tag class="altsym"> when you define a class (a name preceded by a period such as ".altsym") and use <tag id="altsym"> when you define an ID (a name preceded by a "#" such as "#altsym" - intended to apply to only a single instance of an element in your document).

If you want all elements of a given type to have the same style, then you can define them in the stylesheet with no .class or #id.

/* applies to all <ul> elements: */
ul { color: red; }

/* applies to all <ul class="blue"> elements: */
ul.blue { color: blue; }

/* applies to the <ul id="yellow"> element: */
ul#yellow { color: yellow; }

[digitalentropy]

Many thanks.

[ray326]

I'd highly recommend you check out the Castro link in my sig.