Re: [css-d] navigation list with bullet and background color change.

2011-12-03 Thread mem 
Thank you all, again. :)

Issue solved. 

M.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation list with bullet and background color change.

2011-12-02 Thread John D 

 It seems that, when we mouse hover the padding area, we will have a
 red text over a red background, a bad combination that should never 
arrive.

I am seeing white text on red background.

Good luck.



 
 I'm trying to make a list that will change tree things on hover:
 
 text color;
 background color;
 bullet image;
 
 Can I please ask you guys to have a look here:
 
 http://jsfiddle.net/4PUFa/5/
 
 
 It seems that, when we mouse hover the padding area, we will have a red text 
 over a red background, a bad combination that should never arrive.
 

  
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation list with bullet and background color change.

2011-12-02 Thread Tim Climis 
 It seems that, when we mouse hover the padding area, we will have a red
 text over a red background, a bad combination that should never arrive.

The padding area isn't the issue.  It's actually the border.  Which means as
written, there's only 1px where that can happen.  I had to try really hard
to hit it.

But this will fix it:

li{
display: block;
}

a {
 display:block;
border-top: 1px dotted #ccc;
 background:green
url(http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif;)
no-repeat right center;
 padding: 2px 0;
 color: red;
}

a:hover {
background-color: red;
color: white;
}

---Tim

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation list with bullet and background color change.

2011-12-02 Thread David Laakso 

On 12/2/11 2:14 PM, mem wrote:

I'm trying to make a list that will change tree things on hover:

text color;
background color;
bullet image;

k. regards,
mem



Something like this?

!doctype html
html lang=en-us
head
meta charset=utf-8
titlemem/title
meta name=viewport content=width=device-width
style
html,body{margin:0;padding:0;}
nav ul{margin:0;padding:0}
nav ul li{list-style:none;}
nav ul li a {background: lime 
url(http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif;) 
no-repeat right center;border-top:1px solid #000;border-bottom:1px solid 
#000;color:#000; font-size: 100%;display:block;margin:0 0 1px 
0;padding:.5em 0;text-decoration:none}
nav ul li a:hover,nav ul li a:focus,nav ul li a:active{background: red 
url(http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif;) 
no-repeat right center;color:#fff}

/style
!--[if lt IE 9]
script src=//html5shim.googlecode.com/svn/trunk/html5.js/script
![endif]--
/head
body
navul
lia href=#Page One/a/li
lia href=#Page Two/a/li
lia href=#Page Three/a/li
lia href=#Page Four/a/li
/ul/nav
/body/html

Best,
Una Barth
Los Angeles



--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/