have been fiddling around with the sliding door buttons and now have it working in Mozilla, IE, Safari, Chrome.
First, I made longer background images (280px and a 10px) otherwise my buttons with a longer text were ripped apart in IE.
Am attaching my css for the buttons (BUT REMEMBER, MINE ARE LONGER THAN THE ORIGINAL ONES).
This article was of great help: My link
/* ultimate buttons, modified */
.buttons {
background: transparent url('images/button2_right_10px.gif') no-repeat scroll top right;
color: #000000;
display: block; /*so whole element is fully clickable*/
float: left; /*span part will float up beside it and push it out*/
font-style: normal; /*vs italic*/
font-size: 0.85em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding-right:10px; /* overlap of left image on right image: ((right-image-size)-(padding of span) - 1px), now text is centered*/
border: none;
overflow: visible; /*button stays in table-element in IE*/
margin-top: 6px; /*this aligns the submit button with the others*/
margin-right: 6px; /* without this, right button not displayed */
margin-bottom: 3px;
margin-left: 3px;
text-decoration: none;
}
.buttons span { background: transparent url('images/button2_left_280px.gif') no-repeat;
display: block;
padding: 3px 0px 6px 10px; /*positions text in button and shows all of button, check across browsers, so everything is displayed in all browsers*/
text-decoration: none;
border: none;
}
.buttons:hover {
color: #000000;
cursor: pointer;
text-decoration: underline;
}
.buttons_submit {
background: transparent url('images/button2_left_280px.gif') no-repeat;
font-style: normal; /*vs italic*/
font-size: 0.95em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #000000;
display: block;
float:left;
padding: 3px 6px 6px 16px; /*positions text in button and shows all of button*/
border:none;
overflow: visible; /*button stays in table-element in IE*/
margin: 0px; /*this is required, otherwise Safari adds a margin by default and you have a line between the two images*/
}
.buttons_submit:hover {
color: #000000;
cursor: pointer;
text-decoration: underline;
}