Question

i have a css prop like stated

#menu li#selected { padding: 0 10px; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px; }

after the li i need to display the second part of the image nav-tab-right.gif

i try

#menu li#selected:after { background:url(nav-tab-right.gif) bottom right no-repeat; }

but this returns inconclusive

Answer 1

Building from your previous question‘s HTML.

IE7 and below doesn’t support the :after pseudo-element. Use something like this instead:

HTML:

<li id="selected"><a href="http://www.">FAQ'S</a></li>

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

This will work in all browsers and doesn’t rely on :after which IE7 and below doesn’t support.

---

Hover Variation

Another advantage of using this method is that you can modify it slightly to allow for CSS rollover images that will be compatible with IE6 as such:

HTML:

<li id="selected"><a href="http://www."><span>FAQ'S<span></a></li>

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
  padding: 0;
  margin: 0;
}

#menu #selected a span {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

/* Hovered, so let's change the colors and the images */
#menu #selected a:hover {
  background:url(nav-tab-left-hover.gif) bottom left no-repeat #902B27;
}

#menu #selected a:hover span {
  background:url(nav-tab-right-hover.gif) bottom right no-repeat;
}

Yes, it does work on IE6 and below (and above) since a is the only element for which IE6 supports the :hover pseudo-class. It is also the reason why this method requires adding an additional <span> tag as we cannot target the <li> with :hover in a way which IE6 understands.

_{I do recommend using CSS sprites instead of separate images for the hover effect, but to keep this example as simple as possible, I will keep it as such.}

For more information about CSS selectors support, see CSS – Contents and compatibility.