Page seems to be ignoring CSS (or so it seems)

Hi All

Not sure if this is the best place for this post as i am not sure if it's the HTML or the CSS causing the problem.

I have a page with a side menu and the menu should display a tick in a box for the page you are currently viewing. The tick is placed in the box through CSS and it seems that the CSS is being ignored for sub menu items.

Could you have a look over the code and tell me why the class="notick" seems to be ignored on the sub menu items as it is displaying with a tick.

This seems to occur when i am viewing the master page which has sub pages, the sub page menu items are also ticked but if i view a sub menu page then works as expected.

HTML

<ul class="tree">
	<li class="notick">
		<a href="/">Home</a>
	</li>
	<li class="notick">
		<a href="../about.asp">About</a>
	</li>
	<li class="tick">
		<a href="/Examples">Examples</a>
		<ul>
			<li class="notick">
				<a href="../Examples/textstream1.asp">Text Stream</a>
			</li>
			<li class="notick">
				<a href="../Examples/coursebooking.asp">Course Booking</a>
			</li>
		</ul>
	</li>
	<li class="notick">
		<a href="../links.asp">Links</a>
	</li>
	<li class="notick">
		<a href="../contact.asp">Contact</a>
	</li>
</ul>

Code (markup):

The page is generated by ASP but this is the output that arrives in the browser.

CSS

#sidebar ul.tree li.notick a
{
	padding-left: 12px;
	background-image: url("images/sidebar_link_unread.gif");
	background-repeat: no-repeat;
	background-position: left center;
	color: #2e3753;
	font-weight: bold;
	text-decoration: none;
}
#sidebar ul.tree li.notick a:hover
{
	background-image: url("images/sidebar_link_hover.gif");
	text-decoration: underline;
}
#sidebar ul.tree li.notick a:visited
{
	background-image: url("images/sidebar_link_unread.gif");
}
#sidebar ul.tree li.notick a:active
{
	background-image: url("images/sidebar_link_unread.gif");
}

#sidebar ul.tree li.tick a
{
	padding-left: 12px;
	background-image: url("images/sidebar_link_read.gif");
	background-repeat: no-repeat;
	background-position: left center;
	color: #2e3753;
	font-weight: bold;
	text-decoration: none;
}
#sidebar ul.tree li.tick a:hover
{
	background-image: url("images/sidebar_link_read.gif");
}
#sidebar ul.tree li.tick a:visited
{
	background-image: url("images/sidebar_link_read.gif");
}
#sidebar ul.tree li.tick a:active
{
	background-image: url("images/sidebar_link_read.gif");
}

Code (markup):

This has me totally mystified as to why the page would ignore the class="notick" and display a ticked version, originally i thought it was an ASP issue not setting the class correctly but after viewing the source it shows the class values are set as i would have expected them to be.

Anyone got any suggestions as to why this might be.

TIA
Ian

 

Now, does the notick on the css not work at all? Will it even underline the text?

 

Yes the text is being underlined, it's just displaying the wrong image file.

 

Well, the css file is reading then but make sure your image is uploaded and exist. I would personally use a direct link to the image.

background-image: url("http://yourdomain.com/images/sidebar_link_hover.gif");