Problem with CSS and Button

Question

I have CSS

div.myButton input a {
display:block;
height: 24px;
width: 43px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("hover.png") 0 0 no-repeat;
text-decoration: none;
}
myButton a:hover {  
background-position: 0 -44px;
color: #049;
}
myButton a:active {
background-position: 0 -88px;
color:#fff;
}

And then i have HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

I don't know where I'm going wrong but I'm unable to view the image !!

Any help ?

Thanks

Breezer · Accepted Answer · 2010-12-07 08:16:51Z

1

change

div.myButton input a

to

div.myButton input

and the other 2 to

div.myButton input:hover

div.myButton input:active

http://www.jsfiddle.net/EpyGn/1/

edited Dec 7, 2010 at 8:16

answered Dec 7, 2010 at 7:55

Breezer

10.5k6 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Philip Walton Over a year ago

"div.myButton" is redundant, simply putting .myButton is sufficient. (Two can play at this game)

Breezer Over a year ago

hahahahahaha can't breath ... true but since he's using that method im assuming he has a reason maybe he has another element with the same class with input fields then since its not a id but a class it could be a necessity to do so. Just saying doesn't have to be that way, simple put, a possibility.

5416339 Over a year ago

jsfiddle.net/EpyGn It works but the problem is that.The image is in the button. I want the image to be displayed instead of the default button . Ex . I want it to be like the "Magnifying lens" as seen as www.entireweb.com

David Hedlund · Accepted Answer · 2010-12-07 07:50:54Z

1

div.myButton input a looks for a div with the class myButton that contains an input, that contains an anchor. You have no such anchor, so the style is not applied to anything.

answered Dec 7, 2010 at 7:50

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

4 Comments

5416339 Over a year ago

I didn't get you mate ? Can you make the modifications in the current code..I"m not able to understand what you said.

David Hedlund Over a year ago

@541: it isn't clear from your question where you want the image to appear, so I wouldn't want to suggest any changes. I'm just saying that all the css selectors you've pasted are selecting a elements, and you do not have any <a...> in your code, so none of those styles are applied right now.

5416339 Over a year ago

Ok,Now i get it.But i did change it and check this : jsfiddle.net/EpyGn The image is displayed in the button and "I want the image TO BE THE BUTTON"...Get it ?

David Hedlund Over a year ago

You should've told us :) <input type="image" src="hover.png" />

pooja · Accepted Answer · 2010-12-07 08:11:48Z

0

div.myButton { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif; color:#333; background-color:#093; background:url(images/add.png); background-image:url(file:///C|/Documents%20and%20Settings/pooja/Desktop/cnn.png) text-decoration: none; } myButton a:hover {
background-position: 0 -44px; background-color:#093; color: #049; } myButton a:active { background-position: 0 -88px; background-color:#093;

color:#fff; }

answered Dec 7, 2010 at 8:11

pooja

2,4623 gold badges17 silver badges16 bronze badges

Collectives™ on Stack Overflow

Problem with CSS and Button

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related