Question

I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;

#rightContent  .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}

Please help. Thank you.

Answer 1

I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).

When a browser sees a style they don’t know what to do with, they usually ignore the whole style. Putting the background-image onto it’s own line (eg. it’s own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn’t know about.