Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    background image dissappears

    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) ;
    }
    Wayne Christian

  • #2
    Regular Coder
    Join Date
    Jun 2003
    Location
    California
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts

    check syntax

    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

  • #3
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Wayne Christian

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •