Re: [WSG] Making CSS Buttons active
Mike Kear asked:
I'm building a site with a navigation button stack in the left
column, and I'm trying to figure out how to make the whole button
active. I know I've seen it happening somewhere but I can't find
an example right now. Can anyone show me how that is achieved?
Christian Bradford replied:
I believe what you might be missing is a specified width for the
anchor tags to fill the buttons. Your stylesheet's ul.menu li a,
or equivalent, needs a width: 100%; added.
Mike, Christian is correct that, for IE to make the whole button
clickable it needs a dimension. If you don't want a 100% width
you can also give (IE Win only) a height, using the star html hack
and the backslash comment hack to hide it from IE Mac, viz:
/* for IE Win only \*/
* html #yournav a {height: 1em;}
/* stop hiding from Mac */
IE Win will (wrongly) increase the height if necessary.
Cordially,
David
--
David Hucklesby, on 7/30/2005
http://www.hucklesby.com/
--
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Making CSS Buttons active
Mike Kear asked:
I'm building a site with a navigation button stack in the left
column, and I'm trying to figure out how to make the whole button
active. I know I've seen it happening somewhere but I can't find
an example right now. Can anyone show me how that is achieved?
Christian Bradford replied:
I believe what you might be missing is a specified width for the
anchor tags to fill the buttons. Your stylesheet's ul.menu li a,
or equivalent, needs a width: 100%; added.
Mike, Christian is correct that, for IE to make the whole button
clickable it needs a dimension. If you don't want a 100% width
you can also give (IE Win only) a height, using the star html hack
and the backslash comment hack to hide it from IE Mac, viz:
/* for IE Win only \*/
* html #yournav a {height: 1em;}
/* stop hiding from Mac */
IE Win will (wrongly) increase the height if necessary.
Cordially,
David
--
David Hucklesby, on 7/30/2005
http://www.hucklesby.com/
--
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Making CSS Buttons active
Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
Re: [WSG] Making CSS Buttons active
You need to use the property "display:block;". I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
RE: [WSG] Making CSS Buttons active
Thanks for the suggestion. Thats what I thought. Im using display:block, so I must have some other error or something in there. Ill go through the style sheet line by line again and see if I can see whats negating the display:block . Thanks for the suggestion. Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Friday, 29 July 2005 8:19 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Making CSS Buttons active You need to use the property display:block;. I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active Im building a site with a navigation button stack in the left column, and Im trying to figure out how to make the whole button active. I know Ive seen it happening somewhere but I cant find an example right now. Can anyone show me how that is achieved? Im not sure if Im making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesnt work. If I have a button thats a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know Ive seen this with java applets, but I sure dont want to go down that road again I have that on my own site now and its a pain. I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
Re: [WSG] Making CSS Buttons active
I believe what you might be missing is a specified width for the anchor tags to fill the buttons. Your stylesheet's ul.menu li a, or equivalent, needs a width: 100%; added. Christian Bradford On 7/29/05, Michael Kear [EMAIL PROTECTED] wrote: Thanks for the suggestion. That's what I thought. I'm using display:block, so I must have some other error or something in there. I'll go through the style sheet line by line again and see if I can see what's negating the display:block . Thanks for the suggestion. Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Friday, 29 July 2005 8:19 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Making CSS Buttons active You need to use the property display:block;. I suggest you see some of the great examples at http://css.maxdesign.com.au/listamatic/ - Original Message - From: Michael Kear To: wsg@webstandardsgroup.org Sent: Friday, July 29, 2005 8:10 PM Subject: [WSG] Making CSS Buttons active I'm building a site with a navigation button stack in the left column, and I'm trying to figure out how to make the whole button active. I know I've seen it happening somewhere but I can't find an example right now. Can anyone show me how that is achieved? I'm not sure if I'm making myself clear, but when I style the nested list, I get nice buttons being displayed, and when the cursor hovers over the word in the button, the hover effect works fine, but when the cursor is over the button but not over the word, the hover effect doesn't work. If I have a button that's a lot wider than the word (for example on the home button where the active area of the button is far smaller than sign up now I know I've seen this with java applets, but I sure don't want to go down that road again – I have that on my own site now and it's a pain.I felt certain there was a way using nested lists and CSS to make the entire button area clickable. Isnt there? Cheers Mike Kear Windsor, NSW, Australia Macromedia Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month
