June 18, 2012

Can't get why background image doesn't look the same?

Question by DenMed

I’m using jQuery validation plugin.
I have two images: first background of label, when data is valid, and second – invalid.

But they don’t look the same with same css attributes.

Here screenshots of my trouble screenshot

Here is my code in css file:

 label.error {
color:transparent;
display: inline;  
background: url('../images/not_valid.png') no-repeat;
padding: 10px;
margin-left: 5px;
width: 47px;
height: 36px;
}

label.valid {
background: url('../images/valid.png') no-repeat;
display: inline;  
padding: 10px;
margin-left: 5px;
color:transparent;
width: 47px;
height: 36px;
}

EDITED: FILES ON DROPBOX link

Answer by Starx

Well, the image seems to be cropped. So the problem seems to be related to either background-position or dimensions or size of the label.

...

Please fill the form - I will response as fast as I can!