Question

hi i am new to css and php too i tried to use it in my php site i have css as follow in which i am trying to change image on hover but i am getting error and my half images changing only …

while the images i am using are,

my css code is,

#header #nav a {
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("../design/nav-l.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("../design/nav-r.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -100px; }
#header #nav a:hover span { background-position:100% -70px; }

hopes for your reply thanks in advance !

Best Regards,

Answer 1

You can’t mix % and px on the same CSS value.

background:url("../design/nav-r.png") 100% -35px no-repeat;
#header #nav a:hover span { background-position:100% -70px; }

These two lines are invalid CSS and are probably causing the parser to freak out. Start by setting them using either % or px, but not a combination of both.

background-position: 100px -35px; <--- OK  
background-position: 100% 50% <--- OK  
background-position: 100% 100px <--- Invalid

If the UI is not behaving correctly after that, you should use a web inspector like Firebug or the inspector built into your browser to see what’s going on under the hood. This will often give you big clues as to what is wrong with your styles.

If you’re still stuck after trying to fix the problem yourself using a web inspector, update the question with more detail (what have you tried, what was the result) and we’ll have a better shot at helping you fix it 🙂