Highlight image hover effect (borderize) problem

[Peter McCartney]

Hi! Thanking anyone for a reply.

I successfully used the Highlight image hover effect (borderize) code for my blogger blog. The image is in the upper section of the righthand side sidebar. When I hover over it and the border comes up in pushes all the page elements below it down. This does not happen if it is in the bottom wide page elements.

Does anyone have a suggestion to stop this please.

Regards Peter McCartney

[jscheuer1]

Give the image's non-hovered css a border color that matches the background with its type and width the same as the hovered css border.

[Peter McCartney]

I have added this to my blogger blog right handside sidebar. The image is small enough to fit into the sidebar. I added the same code into the bottom wide footer and had no problem with down shifting. I am a new blogger excuse me for my ignorance. I have tried it in a table and without using a table, still the same problem.
..................................................

<table border="0" unselectable="on" cellspacing="0" cellpadding="0" width="200">
<tbody>
<tr>
<td valign="top" width="200"><a atomicselection="true" class="toggleborder" href="http://www.nursinglink.com"><img src="http://lh4.google.com/MaccaSenior/RoRRlJNzGGI/AAAAAAAAAIo/xO5igJ4BSH8/nursinglink.jpg"/></a> </td></tr></tbody></table>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

}

.toggleborder:hover img{
border: 1px solid navy;
}

.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}

</style>

.......................................................
Regards Peter

[Peter McCartney]

Thanking you for your help. I resolved it by adding height="35". The table borders caused the downshifting of the lower page elements.

.......................................
<table border="0" unselectable="on" cellspacing="0" cellpadding="0" width="100" height="35">
.......................................

You live & learn
Regards Peter McCartney

[Peter McCartney]

Hope this helps. How I got it to work.

I learnt not to put the CSS & HTML code in the one blogger blog page element. Put them in seperate page elements. (Funny how the CSS code remains invisible)

I changed my border colours to suit the background surrounding my images so I could see it working propery. As I did not do this in the beginning but worked it some hours later.

I changed the code wording of "toggleopacity" & "toggleborder" in each page element containing the HTML to suit my needs.

I changed each table height & width details to stop page elements below getting shunted down. Using tables all started by using Windows Live Writer. I suppose I could have done away with tables but I did it anyway. I'll play around with that later!

That's enough for now. I am tired and I have to cook dinner for the wife. Bye!
Thank you for the earlier help. Great site and I am very gratefull.

Regards Peter McCartney