Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
CSS Button Rollover problem (only text has hover effect)
Old 04-11-2007, 04:22 AM CSS Button Rollover problem (only text has hover effect)
Super Talker

Posts: 109
Trades: 0
I'm trying to create a rollover effect with some buttons using css. You can see what I am trying to do at http://www.chibabeat.com/test_site/page/17397 . My problem is that the hover effect works when you mouse over the text but I'm wanting the hover effect to work when you hover over the button as a whole. Can anyone tell me what I am doing wrong with the css? The css I am using is

Code:
#pic1 {
background: url(http://chibabeat.com/button.jpg) no-repeat;
 position: relative;
font-family: arial, helvetica, sans-serif;
font-size: 130%;
font-weight: bold;
white-space: nowrap;
display: block;
width: 124px;
height: 70px;
text-decoration: none;
line-height: 55px;
vertical-align: middle;
margin: 0; 
padding: 3px 11px 3px 0;
text-align:center;
}
#pic1 a {
text-decoration:none;
color: #000000;
}
#pic1 a:hover{
background: url(http://chibabeat.com/button1.jpg) no-repeat;
 position: relative;
 font-family: arial, helvetica, sans-serif;
font-size: 130%;
font-weight: bold;
white-space: nowrap;
display: block;
width: 124px;
height: 70px;
text-decoration: none;
line-height: 55px;
vertical-align: middle;
margin: 0; 
padding: 3px 11px 3px 0;
text-align:center;
}
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


A master in stucco, veteran in love, and an outlaw in Peru!
orionvortex is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 04-11-2007, 03:34 PM Re: CSS Button Rollover problem (only text has hover effect)
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Add display:block to your #pic a rules.
And, you should define the 'normal' state button as background for the <a>.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-12-2007, 08:58 AM New Problem: IE 7 space
Super Talker

Posts: 109
Trades: 0
The hover is fixed but now I noticed that I have a large space between my navigation buttons and the content box. When fix the space for IE 7 with padding or margins firefox no longer renders properly. They are both moving in different directions. Firefox pushes the nav buttons down and IE is pushing them up.
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


A master in stucco, veteran in love, and an outlaw in Peru!
orionvortex is offline
Reply With Quote
View Public Profile
 
Old 04-12-2007, 11:15 AM Re: CSS Button Rollover problem (only text has hover effect)
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,938
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
You're repeating IDs. I doubt that it's your problem, but if you're going to use it the way you are, use classes instead.

IDs are for unique elements.
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
(my blog)


Please login or register to view this content. Registration is FREE
(with proof)
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Reply     « Reply to CSS Button Rollover problem (only text has hover effect)
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.36142 seconds with 12 queries