50 users online (1 members and 49 guests)  


  Results 1 to 5 of 5

Related

  1. Scrollbar in a cell in a table?    Forum: HTML Forum
    Replies: 6
  2. Hyperlink table cell    Forum: HTML Forum
    Replies: 11
  3. Replies: 5
  4. table - cell hyperlinking    Forum: HTML Forum
    Replies: 3
  1. #1
    svoltmer's Avatar
    New User

    Status
    Offline
    Join Date
    May 2003
    Posts
    9

    Border for table cell rollover

    Hi, I have a navigation table with cells that change states using "onmouseOver" to add "style.border=('1px sold black');" . But this causes the navigation table cells to expand to include the 1px border, which in turn pushes the items in the table cell adjacent to the navigation. This makes for a jumpy look when the rollover is moused over. Any suggestions on how to stop the table cells from expanding and contracting on my "onmouseOver" and onmouseOut" states? Thanks!

  2. #2
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    Did you try making the original state of the border the same colour as the background? Then style.border=('1px sold black'); on mouseover just changes the colour of the now existing border to black.

    That's just my shot at a first solution. I'd need to see some code if I've misunderstood your question.
    Last edited by Android; 09-11-2003 at 12:40 PM.

  3. #3
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    Keep in mind that the border is ADDED to the cell dimension, an easy work around is to add a border to the mouseout version, using the cell background color as the border color. This will keep the cells the same sizes for mouseover and mouseout.

    Dave

  4. #4
    svoltmer's Avatar
    New User

    Status
    Offline
    Join Date
    May 2003
    Posts
    9
    Thanks! I can't believe I missed such a simple solution. Fixed all my issues.

  5. #5
    ah_jer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Posts
    1
    Quote Originally Posted by svoltmer
    Thanks! I can't believe I missed such a simple solution. Fixed all my issues.
    Just learn something from other site.

    a.bgrollover {
    background-color: #ECF5F2;
    color: #373F88;
    display: block;
    margin: 1px;
    padding: 3px;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    a.bgrollover:hover {
    background-color: #373F88;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #ECF5F2;
    font-weight: bold;
    }



    Then:

    <td>a href="#" class="bgrollover">Testing</a></td>

    and that's it. Much more direct.
    Last edited by ah_jer; 12-08-2003 at 02:30 PM.



Tags for this Thread