Active button issue

HTML & CSS
1

Hi!

I have a problem with the website I’m currently coding. I have a slider (codaslider) with a menu beneath. Now I want the link clicked to show a ‘active’ image. I have tried using CSS, but only in Safari it does what I want.

Here is what I have so far:

HTML

             
<ul class="navigation">
    <a href="#me"><li class="submenu1">Who am I?</li></a>
    <a href="#scratch"><li class="submenu2">Webdesign from scratch</li></a>
    <a href="#redesign"><li class="submenu3">Website redesign</li></a>
    <a href="#CMS"><li class="submenu4">CMS</li></a>
</ul>

CSS


li.submenu1 {
	width: 242px;
	height: 64px;
	background-image: url(images/slidedeck/slide_button1.jpg);
	text-indent: -5000px;
}

li.submenu1:hover {
	background-image: url(images/slidedeck/slide_button1a.jpg);
}

a.selected:link li.submenu1 {
	background-image: url(images/slidedeck/slide_button1a.jpg);
}

...

So as you can see I have a list-item with a classname … the list-item get’s a background-image (default image) and the text get’s pushed out of the list-item. As the user hovers the li, the background-image will change to the active image. Same for the selected list-item.

In Safari everything works like it should be. In Chrome + Firefox the hovers work, but the active link does not get the right background. Also, in Firefox the links do not work anymore.

Does anybody know what I did wrong?

2

Just tested it in several browers on a pc (i’m on mac) and it seems to work for all of them, except IE6 (but who cares, right :wink: )

So my problem is solved! Thanks ralph.m for pushing me into the right direction!

3

Ok, seems that I have fixed the problem for a part.

I used this technique to make my LI clickable:

<li class="submenu1"><a href="#me">Who am I?</a></li>

li.submenu1 a  {
	width: 242px;
	height: 64px;
	display: block;
}

This makes the clicking area of my link the same size as the button, and not just the size of the text in it.

Now the buttons are clickable in Safari, Chrome and Firefox.

To show the tab that is currently active I fixed the problem by doing this:

li.submenu1 a.selected:link {
	background-image: url(images/slidedeck/slide_button1a.jpg);
}

instead of this:

a.selected:link li.submenu1 {
	background-image: url(images/slidedeck/slide_button1a.jpg);
}

Now the only browser for the moment that does not want to show me which tab is active is Chrome … for Firefox and Safari it works.

Any idea why Chrome is giving me this hard time?

4

No problem, i will post a link to the website later on, have to upload it and i’m not home for the moment.

5

It sounds like there should be a simple solution to this, but I’m afraid I can’t picture what you are talking about. :frowning: Could you explain what effect you are aiming for in more detail, or provide a link?

6

Thanks! :wink:

I mean when a link is clicked, because the page itself will not refresh.

Good point about the LI in the A element, that is probably why the links don’t work in Firefox … I will look into that, but the problem then is that the text itself will become the link (which is pushed outside the LI) and there will be nothing to click in the LI itself, any idea how I can solve this?

7

Hi xeon43, welcome to SitePoint! :slight_smile:

Now I want the link clicked to show a ‘active’ image.

Not sure what you mean by that. Do you mean when you click on a link, or when you are on the page that the link has pointed to? If the latter, place a class or id on the body tag and bring that into the picture.

Before that, though, do be aware that you are not allowed to have a LI (which is a block level element) inside an A element (which is an inline element).

8

Ok, strange things are happening … :slight_smile:

I just uploaded the page and now it works in chrome too … just like it did in Safari. Only firefox still has problems, but maybe that’s caused by the LI inside the A tag… (didn’t check IE though … )

Anyway, I have a stripped down version which you can find here: http://www.xeondesigns.be/v3/index.html.

You can see the menu beneath the slider I was talking about. The hovers work perfectly, the only thing that is not working is the active/selected state.

Oh yeah, you can find the css for the slider here: http://www.xeondesigns.be/v3/codaslider.css