TalkPHP - How to prevent jumping on rollover

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - How to prevent jumping on rollover (http://www.talkphp.com/xhtml-html-css/3008-how-prevent-jumping-rollover.html)

How to prevent jumping on rollover

I'm trying to display a box around images as the user mouse's over them. The code works but the images jump. Here is a link to an example http://64.22.87.10/~codetest/rollover/test.html And here is the code used on that page. I would appreciate any thoughts on what the problem is. (Note that the tables are not my decision and must be used.)

HTML Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html dir="ltr" lang="en">

<head>

<style type="text/css">

.bgrollover {

background-color: #fff;  

border-style: double; 

font-size: 10px;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

} 

.bgrolloverPlain {

background-color: #fff;  

border-style: none; 

font-size: 10px;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

} 

a.bgrollover, a.bgrolloverPlain {

background-color: #fff;  

border-style: none; 

font-size: 10px;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

} 

a.bgrollover:hover, a.bgrolloverPlain:hover {

background-color: #fff; 

font-size: 10px;

font-family: Verdana, Arial, Helvetica, sans-serif; 

text-decoration: none;

}

</style> 

</head>

<body>



<table border="0" width="100%" cellspacing="0" cellpadding="2">

  <tr>

   <td><table border="0" width="30%">

    <tr>

     <td class="bgrolloverPlain" align="center" onMouseover="this.className='bgrollover'" onMouseout="this.className='bgrolloverPlain'"><img src="imgb.jpg" width="250" alt=""><br>Premium Quality</td>

    </tr>

   </table></td>

   <td><table border="0" width="30%">

    <tr>  

     <td class="bgrolloverPlain" align="center" onMouseover="this.className='bgrollover'" onMouseout="this.className='bgrolloverPlain'"><img src="imgc.jpg" width="250" alt=""><br>Prestige Quality</td>

    </tr>

   </table></td>

  <tr>       

</table>              

</body>

</html>

Personally, I would do it with css only.

Create an image with an anchor:
(The anchor is for the hovering, IE can only hover anchors)

HTML Code:

<a href=";"><img src="img.jpg" width="20" height="20" alt="" /></a>

Give the image a the same color border as the background (for instance, white):

Code:

a img { border: 2px solid #fff; }

Now to the hovering part:

Code:

a:hover img { border: 2px solid #000; }

As you can see, it works well in FF!

As usual, in IE this won't work, so you have to put a little 'hack' on the a:hover, like this:

Code:

a:hover { color: red; }

Now it works cross-browser without the picture moving! ;-)

Good luck.

Thanks for the suggestion. I had cut the code down to try to present the problem in the least possible terms. In actuality, this is a php site and the image is already a link so, as far as I know, I can't use the code you suggested since I can't add the anchor. And wouldn't the img class affect all images? That would not be correct.

So you can't give the anchor nor the image a classname?

The way maZtah wrote that, the snippet would only affect images inside of an A-nchor tag. <a href...>

Code:

a img { #images inside A  <a href...><img></a>}

img { #all images <img>}

img.imgClass { #any images with the class 'imgClass' <img class="imgClass" ...> }

div#menu img { #only images located inside a div with the id of 'menu' <div id="menu"><img></div>}

See how that works?

If the image is already a link you shouldn't have any problem implementing maZtah's fix. I would also suggest using straight CSS to do this instead of javascript, especially in this case it's highly unnecessary and redundant considering css already allows you to add the :hover pseudo selector.

If the code above was exactly how it was going to be used, this is how I'd write the same fix (without the javascript);

Code:

td.bgrolloverPlain img

{

    border : 3px double #FFF;

}



td.bgrolloverPlain img:hover

{

    border: 3px double #000;

}

That's the best css-code, but IE(6) does only allow the :hover on an anchor. That's why I put an <a> around the image.

Anyways, I think Benton can fix his issue now :).

*kidnaps IE6 and dumps it off a bridge*

I am still trying to get this to work. I've implemented the changes mentioned here, although I'm not sure I did them correctly. I've updated the code on the page so the result can be seen there and the code is below. It is better than the original, as far as the image moving is concered but the text is not included in the box now, the text moves up and down and the box around the image is missing the right side. I'm a novice at css, in case it isn't obvious, and I have put a lot of effort into getting this to work but I'm lost. Would someone please take another look and let me know where I have gone wrong?

HTML Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html dir="ltr" lang="en">

<head>

      <style type="text/css">

      a imgA { border: 2px solid #fff; }

      a:hover imgA { border: 2px solid #000; }

      td.bgrolloverPlain img

      {

        border : 3px double #FFF;

      }

      

      td.bgrolloverPlain img:hover

      {

        border: 3px double #000;

      }

      a.bgrolloverPlain {

        border: 3px double #fff;

        text-decoration: none;

      } 

      a.bgrolloverPlain:hover {

        border: 3px double #000;

        text-decoration: none;

      }       

      </style>

</head>

<body>

     <table border="0" width="100%" cellspacing="0" cellpadding="2">

      <tr>

        <td><table border="0" width="100%">

         <tr>

          <td class="bgrolloverPlain" align="center" width="33%" valign="top"><a class="bgrolloverPlain" href="http://domainname"><img class="imgA" src="imgb.jpg" width="250" border="0"><br>Classic Quality ( I1-I2 ) 14K<br>Gold Diamond Solitare Stud<br>Earring</a></td>

         </tr>

        </table></td>

        <td><table border="0" width="100%">

         <tr>

          <td class="bgrolloverPlain" align="center" onMouseover="this.className='bgrollover'" onMouseout="this.className='bgrolloverPlain'"><a class="bgrolloverPlain" href="http://domainname"><img class="imgA" src="imgc.jpg" width="250" border="0"><br>Premium Quality ( Si1-Si2 )<br>14K Gold Diamond Solitare Stud<br>Earring</a></td>

         </tr>

        </table></td>

      </tr>

    </table>

</body>

</html>

Quote:

Originally Posted by delayedinsanity (Post 16143)

*kidnaps IE6 and dumps it off a bridge*

If you need a body bag, let me know.

Really though, I love the :hover selector. I have input elements that change color slightly based on selection. I'll be damned if I am going to write something custom just for a pretty affect though for the IE users. In all reality, its just more time to promote firefox :D

Quote:

Originally Posted by drewbee (Post 17150)

In all reality, its just more time to promote [s]firefox[/s] Opera :D

Fixed. >:)

edit:/ 9.5 is an excelent start!

Quote:

Originally Posted by Jim (Post 17152)

Fixed. >:)

hah!

I've really been meaning to try opera out one of these days.

Thanks to everyone for trying to help. I didn't realize it was such a difficult problem.

I just wanted to followup on this since I finally figured it out and thought someone might need to know how to do it at some point.

The original code I used works for the most part. All I had to do was change the border-style: none; to border-style: double; for the plain classes and make the border color white. That way, the border is really being drawn all of the time for each box, thus preventing the size to change. On the mouseover, the color is changed and the border appears. Works well in IE and FireFox.

You do know that an outline is the same as a border, and it doesn't move the element, right? You could have just made that one element use an outline.

The problem is, as usual, internet explorer doesn't properly support the outline property. So you need to use border if you want it to be cross-browser.
-m