...

View Full Version : Hover over cell border change.



Bengal313
01-31-2004, 07:48 AM
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

rmedek
01-31-2004, 09:46 AM
Hi shakim,

You could use table:hover in the CSS instead of mouseover and mouseout, like so:

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 (http://www.codingforums.com/showthread.php?s=&threadid=32369) on making pseudo-classes work in IE... check out Vladdy's solution (http://www.vladdy.net/Demos/IEPseudoClassesFix.html).

pardicity3
01-31-2004, 07:15 PM
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.

mindlessLemming
01-31-2004, 10:55 PM
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

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum