Menu
Guys!
I m following sliding doors technique for every possible button in my upcoming application, but here FF 3.0 & safari 4.0 is giving me pain in rendering buttons.
In FF there is one pixel problem coming from no where, and IE7+, chrome and
safari render is perfectly.. pls have a look on the code and attachment also.
Sorry the application is not online, cant post any link, But i ‘d really appreciate your quick help.
“Also, i don’t want to use 2 images for left,right corners due to speed and small jerk which comes while browsing the site first time”
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style>
button.submitBtn {
background:url(images/Search_btnbg.png) no-repeat scroll right bottom;
margin-left:5px;
height:21px;
border:0 none;
padding:0 5px 0 0;
text-align:center;
border:0 none;
cursor:pointer;
}
button.submitBtn span {
background:url(images/Search_btnbg.png) no-repeat scroll left top;
height:21px;
line-height:21px;
padding:0 0 0 9px;
display:block;
color:#FFF;
position:relative;
font-size:10px;
text-transform:uppercase;
}
</style>
</head>
<body>
<form>
<div id=”searchbox”>
<input name=”search” />
</div>
<button value=”submit” class=”submitBtn”><span>Submit</span></button>
</form>
</body>
</html>
[upl-file uuid=76562c7b-0093-4860-8c52-695c3e1af6cd size=4kB]Search_btnbg.png
[upl-file uuid=af794e76-0fe1-4e6f-97c8-17a3470435c5 size=2kB]error.png