Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old May 8th, 2005, 02:07 PM
Authorized User
 
Join Date: May 2005
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default a:hover problems

Hi

Im have a problem that i cannot resolved at all with CSS. I wish to use the a:hover command to change the colour, details of a button, but no matter which browser i try, the effect doesnt work.

The code is as follows:

.regbutton {
    font-size: 12px;
    background-color: #D6D3CE;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(Tab_Button.png);
    color: #FFFFFF;

}

a.regbutton:hover {
color:#FF0066;
background:blue;

}

Then i attach .regbutton as the class to my button

I would be most grateful if anybody could help me with this

Thanks
Steve
Reply With Quote
  #2 (permalink)  
Old May 8th, 2005, 02:23 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
        <head>
            <title></title>
            <style type='text/css'>
                a.regbutton {
                    font-size: 12px;
                    background-color: #D6D3CE;
                    font-family: Arial, Helvetica, sans-serif;
                    background-image: url(Tab_Button.png);
                    color: #FFFFFF;
                }
                a.regbutton:hover {
                    color:#FF0066;
                    background:blue;        
                } 
            </style>
        </head>
        <body>
            <a href='#' class='regbutton'>Test</a>
        </body>
    </html>
Are you doing something like the above? Which browser are you using, and what does the markup look like (just the relevant parts)?


Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
  #3 (permalink)  
Old May 8th, 2005, 04:15 PM
Authorized User
 
Join Date: May 2005
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi

Thanks for replying.. Your very quick!!

Your example worked, when i incorporated into my code... however the problem seems to be
that it wont work for buttons

<input name="submit" type="submit" class='regbutton' value="Register">

underneath this line, i put your code example which worked fine, but the button wont adhere to it
Is this something to do with the button?

Thanks

Steve



Reply With Quote
  #4 (permalink)  
Old May 8th, 2005, 04:21 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Well, that reference in the style sheet only applies to links, it is written only to work on <a> elements that have a "regbutton" class name.

For a button you'll want to reference the <input> element, or remove any reference to any element and include only the class name. For instance:
Code:
                .regbutton {
                    font-size: 12px;
                    background-color: #D6D3CE;
                    font-family: Arial, Helvetica, sans-serif;
                    background-image: url(Tab_Button.png);
                    color: #FFFFFF;
                }
                .regbutton:hover {
                    color:#FF0066;
                    background:blue;        
                }
or

Code:
                input.regbutton {
                    font-size: 12px;
                    background-color: #D6D3CE;
                    font-family: Arial, Helvetica, sans-serif;
                    background-image: url(Tab_Button.png);
                    color: #FFFFFF;
                }
                input.regbutton:hover {
                    color:#FF0066;
                    background:blue;        
                }
Keep in mind however, that Explorer only supports the :hover pseudo-class on <a> elements. This example will only work in browsers that support putting :hover pseudo-classes on any element (Mozilla, Mozilla Firefox, Netscape, Opera, Safari, etc).

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
  #5 (permalink)  
Old May 8th, 2005, 04:30 PM
Authorized User
 
Join Date: May 2005
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thankyou... for being so so helpful.. I cant believe that you have responded with some great help very quickly.
I much apreciate it. Gonna try what you described now...

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problems with getting Front Page 98’s hover button melon Access 0 July 6th, 2006 02:38 AM
ie vs. firefox menu/hover/width problems mishagos BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 June 29th, 2006 08:02 AM
a: hover - style... elladi Dreamweaver (all versions) 2 August 3rd, 2004 06:48 AM
Description box, when hover on certain word. iniro Javascript How-To 5 July 29th, 2004 02:31 PM



All times are GMT -4. The time now is 06:41 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.