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
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Hover over cell border change.

    I have a page that when you hover over the image or text the table border around it appears. Here is my code.

    <td width="100%" align="left" valign="middle" class="body" onMouseOver="this.className='tablehov2'" onMouseOut="this.className='body'"><a href="picturegallery_large.php?album_name=wedding"><img src="../images/weddingtn.jpg" width="85" height="66" border="0" align="left"></a>

    I creatd this via CSS. Now when I hover over the table shifts a little down to make room for the border. I really don't like that. is there a way around this. i want it to remain static and not move while moveover or mouseout. Thanx
    "Knowledge Speaks But Wisdom Listens"

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi shakim,

    You could use table:hover in the CSS instead of mouseover and mouseout, like so:
    Code:
    table 	{
    	border:none;
    	margin:10px;
    	}
    
    table:hover	{
    	border:solid 1px;
    	margin:9px;
    	}
    The :hover part just cuts the margin back by one to make up for the border. You could also add the photos and such w/ "background-image:url(whatever.jpg)" for extra points.

    Of course, we all know the drawbacks (say it together now, everyone)-- it doesn't work in IE. Well, it might, but not without a lot of extra coding...

    -Rich

    edit: There's also a good thread on making pseudo-classes work in IE... check out Vladdy's solution.
    Last edited by rmedek; 01-31-2004 at 10:07 AM.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The cell is moving because the border adds to both the width and the height of the cell. In order to avoid the moving you could either have a border that is the same color as the background of the cell, and then just have the border change color, or you could have padding on the cell and then when you hover over the cell take away the padding and add the border. examples:

    .body {
    background-color: #fff;
    border: 1px solid #fff;
    }
    .tablehov2 {
    border: 1px solid #f00;
    }

    -OR-

    .body {
    padding: 1px;
    }
    .tablehov2 {
    padding: 0;
    border: 1px solid #f00;
    }

    I'm pretty sure either one of those should solve your problem.
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by pardicity3

    .body {
    background-color: #fff;
    border: 1px solid #fff;
    }
    .tablehov2 {
    border: 1px solid #f00;
    }

    -OR-

    .body {
    padding: 1px;
    }
    .tablehov2 {
    padding: 0;
    border: 1px solid #f00;
    }

    I'm pretty sure either one of those should solve your problem.
    I think you mean
    Code:
     table{padding:1px }
    table:hover {padding: 0; border: 1px solid #f00;}
    Obviously this requires a hack to get IE to allow table:hover.

    This won't be a problem once the CSS property "outline" gets a bit of browser respect This is because "outline" is drawn over surrounding elements, unlike border, which is inline.

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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