[pagetta]

I want to have a menu where if the text is normal it has a background that features an arrow, and if it is a link, active, visited or hover it has a blank background - but I cannot seem to get this working it is driving me mad!

this is the css I am using:

.left { font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #364580;
padding-left: 15px;
padding-top: 3px;
padding-bottom:3px;
line-height: 18px;
width: 118px;
font-weight: bold;
text-decoration: none;
background:url(../images/arrow-bg.gif) transparent no-repeat;
}
.left a:link,
.left a:visited,
.left a:active { font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #B2B2B2;
width: 118px;
font-weight: normal;
text-decoration: none;
background:url(../images/arrow-none.gif) transparent no-repeat;
}
.left a:hover { font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #364580;
width: 118px;
font-weight: normal;
text-decoration: none;
background:url(../images/arrow-none.gif) transparent no-repeat;
}

but it is putting the background on all text regardless of whether it is a link or not! I'm sure its something really simple I am doing wrong but I just don't know what I am still fairly new to css.

Any advice much appreciated. I can provide a link if needed for an example.

[kjmatthews]

First, can you describe the problem? Are background images showing up at all? Never? Only on rollover? My first impulse is to tell you that "transparent" is in the wrong spot - it belongs before "url(www.foo.com/bar.jpg)." I would try that first. If that doesn't work, it would be helpful if you could point us to a URL where we can see the non-functional CSS in action. Good luck!

[pagetta]

this is the page:

http://www.codestone.net/codestonenew/products/test.php

Basically it is showing the arrow-bg.gif when it is not a link, but when it is a link it is still showing this instead of showing the arrow-none.gif

[kjmatthews]

There is nothing on that page...

[pagetta]

sorry - I have been updating the page names

http://www.codestone.net/codestonenew

if you go to products or solutions you can see the little blue arrows - these should disappear if the word is a link given the css above but they do not - any ideas?!

[kjmatthews]

The problem is that your background images are applied to the element whose class is "left" regardless of what appears inside that element. As yet there is no reliable way to apply a style to an element based on something inside that element. The adjacent sibling selector might do this, but I am not able to test it at work, and it doesn't work in Internet Explorer regardless. There are various solutions. I assume you want the blue arrow to be applied to what would normally be a link to the page you're already on. You can try creating another class called "this" or something, and alter your CSS thus (noting the use of shorthand):

Code:

/* styles that will be applied to *all* .left elements */
.left {
 font-family: 10px/18px verdana, arial, helvetica, sans-serif;
 color: #364580;
 padding-top: 3px 0 3px 12px;
 font-weight: bold;
 text-decoration: none;
}

/* setting class="this left" will apply all the above styles as well as the blue arrow */
.this {
  background: url(../images/arrow-bg.gif) no-repeat top left;
}

Then you can get rid of the "background" styles on all of the "a" elements because they're unnecessary. You will then have to alter your HTML so that the class of any element you want to have the blue arrow is "this left" rather than just "this". If you're generating your HTML dynamically it should be fairly easy to have your favorite server side determine which elements this should be applied to.

If this doesn't work correctly let me know - I will be able to test a little more extensively after work!

Good luck!

[kjmatthews]

Looks like you already found a better non-CSS solution!