Advanced Search

Results 1 to 5 of 5

Thread: Highlight image hover effect (borderize) problem

  1. #1
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Highlight image hover effect (borderize) problem

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Resolved

    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

  5. #5
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    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

Bookmarks

Posting Permissions

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