Trying to replace all the buttons w/css sliding door buttons. Works in FF but IE is only showing the old gray default browser buttons and they don't submit/work either. Appreciate a hand, probably a dumb oversite.
doc type:HTML 4.0 transitional.
CSS:
button {
border: 0 none;
cursor: pointer;
font-weight: bold;
padding: 0 15px 0 0;
text-align: center;
height: 30px;
line-height: 30px;
width: auto;
}
button.rounded {
background: transparent url( btn_right.png ) no-repeat scroll right top;
clear: left;
font-size: 0.8em;
}
button span {
display: block;
padding: 0 0 0 15px;
position: relative;
white-space: nowrap;
height: 30px;
line-height: 30px;
}
button.rounded span {
background: transparent url( btn_left.png ) no-repeat scroll left top;
color: #FFFFFF;
}
button.rounded:hover {
background-position: 100% -30px;
}
button.rounded:hover span {
background-position: 0% -30px;
}
button::-moz-focus-inner {
border: none;
}
HTML for the go button I've done for the search form that works in FF:
<td valign="bottom"><input type="text" size="13" name="keyword" class="txtBoxStyle"></td>
<td valign="bottom"><button class="rounded" onMouseOver="this.className='rounded'" onMouseOut="this.className='rounded'"><span>Go</span></button></td>
doc type:HTML 4.0 transitional.
CSS:
button {
border: 0 none;
cursor: pointer;
font-weight: bold;
padding: 0 15px 0 0;
text-align: center;
height: 30px;
line-height: 30px;
width: auto;
}
button.rounded {
background: transparent url( btn_right.png ) no-repeat scroll right top;
clear: left;
font-size: 0.8em;
}
button span {
display: block;
padding: 0 0 0 15px;
position: relative;
white-space: nowrap;
height: 30px;
line-height: 30px;
}
button.rounded span {
background: transparent url( btn_left.png ) no-repeat scroll left top;
color: #FFFFFF;
}
button.rounded:hover {
background-position: 100% -30px;
}
button.rounded:hover span {
background-position: 0% -30px;
}
button::-moz-focus-inner {
border: none;
}
HTML for the go button I've done for the search form that works in FF:
<td valign="bottom"><input type="text" size="13" name="keyword" class="txtBoxStyle"></td>
<td valign="bottom"><button class="rounded" onMouseOver="this.className='rounded'" onMouseOut="this.className='rounded'"><span>Go</span></button></td>