Two images being called at the same time

HTML & CSS
1

I’ve got this HTML code for a link button:

<li class=“default a”><a href=“page/default.aspx” style=“height: 40px;”>Home</a></li>

Backed up by this CSS:

ul#topnav li.default {

  background-image: url("../documents/home.jpg");

  width: 100px;

}

ul#topnav li.default a {

  background-image: url("../documents/homec.jpg");

  width: 100px;

}

The li should just call “default a” but what’s coming up is a hybrid of both images and not ‘all’ of my buttons acting this way though I’m using the same set up for each of them. :confused:

2

That’s a confusing structure.:slight_smile:

“li.default” applies the image to the list item itself.

“li.default a” applies the image to the anchor inside the list because the “a” in that selector is referring to a descendant of li.default.

Therefore the above two rules will give you an image on the list and an image on the anchor. Is that what you intended ? (if so then it is likely you would want the anchor set to display:bock also so that it can take dimensions.)

The confusing part is that you have also added a “space separated class” of “a” here.

<li class=“default a”>

If you wanted to access a list that has classes of default and a class of “a” you would need a dot separated selector like so.

li.default.a {etc…}

That rule would only apply to elements that have a class of “default” and a class of “a”. IE6 doesn’t understand that syntax though and is best avoided and in most cases you could probably just use the class of “a” instead.

e.g.
li.a {etc…}

As usual with these things it always helps to do things clearly and unambiguously and a class of “a” is a little confusing. Give it a more meaningful name and there will be less chance of making a mistake.

<li class=“default highlight”>

3

That solved most of my problems but not all. What I’m looking for is to use a separate image to indicate the current page. Your solution got rid of the hybrid images for most of the link buttons but left the link image signifying the current page uncalled. .

4

How are you calling the current page?

A simple structure would be like this:


<!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">
ul.menu{
    list-style:none;
    margin:0 auto;
    padding:0;
    width:500px;
}
ul.menu li,ul.menu li a{
    width:100px;
    float:left;
    text-decoration:none;
    color:#000;
    text-align:center;
    padding:5px 0;
}
ul.menu li a{background:red;color:#000}
ul.menu li.current a,ul.menu li a:hover{background:blue;color:#fff;}


</style>


</style>
</head>
<body>
<ul class="menu">
    <li class="current"><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a></li>
</ul>
</body>
</html>

I’d need to see your full code to understand what problem you are having but basically you just need to over-ride the previous css so make sure the specificity is correct.

5

Is “default” the class you are using to denote the current page?

You shouldn’t be using a background image on your li items at all.


ul#topnav li.default {
width: 100px;
}
ul#topnav li.default a {
background-image: url("../documents/homec.jpg");
width: 100px;
display: block;
margin: 0;
}

If you want to denote the current item, create a class in <li>


<li class="current"><a href="page/default.aspx" style="height: 40px;">Home</a></li>

Then you can change the link background for the “current” page by saying


li.current a {
  background-image: /*enter new background image here */;
}

There was an entire thread on this just a few days ago. It might be able to help you.

[EDIT] And PLEASE remove the inline styles from your html markup? It shouldn’t be <a href=“page/default.aspx” style=“height: 40px;”>Home</a> It should just be <a href=“page/default.aspx”>Home</a>

6

Problem solved - thanks!