background image dissappears

[wac]

I have a page with a few buttons which have background images used to display their borders. Sometimes when the page is loading, the images appear, then dissappear when the page has finished loading. Sometimes the images dissappear when I hover the mouse over them. I don't have any onmouseover handlers.
It doesn't happen every time. Is there a way to stop this from happening???

<button id='nextseg' type='button' class='btn' title="Next"
onclick='submitForm(event, "processType", "nextSegment", "0")'>
<table cellpadding='0' cellspacing='0'>
<tr><td class='btntl'></td><td class='btntm'> </td><td class='btntr'></td></tr>
<tr>
<td class='btnlm'></td><td class='btnmm'>
&gt </td>
<td class='btnrm'></td>
</tr>
<tr><td class='btnbl'></td><td class='btnbm'> </td><td class='btnbr'></td></tr>
</table>

</button>


style sheet
.btntl, .btntr, .btntm, .btnbl, .btnbr, .btnbm, .btnlm, .btnmm, .btnrm, .btn
{
background-color: rgb(197, 216, 213) ;
}

.btntl, .btntr, .btnbl, .btnbr
{
background-repeat: no-repeat ;
height: 7px ;
width: 7px ;
}

.btntm, .btnbm
{
background-repeat: repeat-x ;
height: 7px ;
}

.btnlm, .btmrm
{
background-repeat: repeat-y ;
width: 7px ;
}

.btn
{
border: none 0 ;
margin: 0 0 0 0 ;
padding: 0 0 0 0 ;
/* background-color:#CED3DE; */
font-size: xx-small ;
font-family: ariel, Helvetica ;
cursor:hand ;
cursorointer;
}

.btntl
{
background-position:bottom left ;
background-image: url(../img/btntl.gif) ;
}
.btntr
{
background-position: bottom right ;
background-image: url(../img/btntr.gif) ;
}
.btntm
{
background-position: bottom center ;
background-image: url(../img/btntm.gif) ;
}
.btnbl
{
background-position: top left ;
background-image: url(../img/btnbl.gif) ;
}
.btnbr
{
background-position: top right ;
background-image: url(../img/btnbr.gif) ;
}
.btnbm
{
background-position: top center ;
background-image: url(../img/btnbm.gif) ;
}
.btnlm
{
background-position: center left ;
background-image: url(../img/btnlm.gif) ;
}
.btnmm
{
background-position: bottom left ;
/* background-image: url(../img/btnmid.jpg) ; */
background-repeat: repeat ;
font-size: xx-small ;
font-family: ariel, Helvetica ;
}
.btnrm
{
background-position: center right ;
background-image: url(../img/btnrm.gif) ;
}

[velious]

it might be a simple and obvious syntax error..happens to me all the time in html...and with a lot of code like that..its very possible...but please delete that code that is not related to your question...thanks

[wac]

Since I don't know what's causing the problem, its difficult to tell what's not relevant. It could be the HTML, which is fairly small and seems ok, or it could be the style sheet. I don't know if the issue is the way the background images are specified (there are eight images to represent the border image of the button) or the way the background-repeat is specified.

[Roy Sinclair]

Check for other style sheets/rules which may conflict. A background property for the a tag specified later in the sheet or in a later sheet than these items could be interfering by overriding the background property which would replace the background image. The later style should be changed to override specific background styles instead of using the "generic" background combination style.