Hi Kevin,
I thunk your problem is in the CSS you are using a class selected
attached to the a attribute but in the XHTML you trying to use it as a ID
selector on the LI element. Try this:
ul li.home{
background-image:url(../images/icons/homeover.gif);
background-repeat:no-repeat;background-position:-94px 1px; }
ul li.home:hover{
background-image:url(../images/icons/homeover.gif);
background-repeat:no-repeat;background-position:-4px 1px; }
<li class="home">< a href"#" class="home">Home</a> </li>
Many Thanks
Disclaimer: This email and its attachments may be confidential and are
intended solely for the use of the individual to whom it is addressed. Any
views or opinions expressed are solely those of the author and do not
necessarily represent those of Essential eBiz Solutions Ltd. If you are not
the intended recipient of this email and its attachments then please contact
the sender and do not use or forward this e-mail to anyone.
Essential eBiz Solutions Ltd, Registered in England and Wales Company
Registration No: 57200784. Registered Office: 6, Gibson Place, Meir,
Stoke-on-Trent, Staffordshire, ST3 5PQ.
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of kevin mcmonagle
Sent: 08 December 2008 16:16
To: [email protected]
Subject: [WSG] hover state on icons(indivdual li backgrounds)
Is it possible to get two images into an li anchor if each background image
or icon is unique.
All the online tutrials that ive found are for list items that share a
common background image - but this must have been done before.
heres the css ive tried:
#home a{background-image:url(../images/icons/home.gif);
background-repeat:no-repeat;background-position:-4px 1px; }
a.home{
background-image:url(../images/icons/homeover.gif);
background-repeat:no-repeat;background-position:-94px 1px; }
a.home:hover{
background-image:url(../images/icons/homeover.gif);
background-repeat:no-repeat;background-position:-4px 1px; }
In the xhtml ive tried both these scenarios and different combinations of
ids/classes on the above css.
<li id="home" >< a href"#" class="home">Home</a> <li id="home"
class="home">< a href"#">Home</a>
The problem is that once one background is in the anchor or li i cant get
another to reposition over it...
Unless someone has a better idea Im thinking about doing something dirty
like wrapping a span around the li's.
If this doesnt make any sense to you here is my very under-construction
example:
http://www.gortahork.eu/en
-best
kevin
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
--
No virus found in this incoming message.
Checked by AVG.
Version: 7.5.552 / Virus Database: 270.9.15/1835 - Release Date: 07/12/2008
16:56
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
