Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Page menu moves on hover (http://forum.bytesforall.com/showthread.php?t=19750)

cabdziner Feb 27, 2013 07:22 AM

[SOLVED] Page menu moves on hover
 
ATA 3.7.10 - http://melissaleeper.wordpressproservices.com

This is a sandbox site I am building for a client. I have a custom widget area for the header content and have adjusted the menu (pages-right) so it is positioned with the bottom of the logo in the header.

Code:

div#menu1 {
background: transparent !important;
border: none !important;
margin:-80px 0 0 0;
}

Problem: the menu items move when you hover over them. I can't seem to find a fix.

I have been using ATA 3.5.3 for many years and this is the first time using this new version.

Any ideas would be greatly appreciated.

juggledad Feb 27, 2013 07:52 AM

well would you like to walk thru how to figure this out?

cabdziner Feb 27, 2013 08:03 AM

yes please

juggledad Feb 27, 2013 08:18 AM

ok, first fire up FireFox and make sure you have the FireBug extension installed
next go view the page then using the browsers 'view source' option, view the source, copy it save it to a text file with the extension 'html' and then open this file in your browser to see if you see the page.

come back once you have done that.

cabdziner Feb 27, 2013 08:34 AM

ok... ready

juggledad Feb 27, 2013 08:55 AM

Next edit the file and remove everything from just after the
HTML Code:

<title>Main « Melissa Leeper</title>
thru just before the <style for all the atahualpa styling
save and view the page

then remove everything from
HTML Code:

<tr id="bodyrow">
to the </tr> just before the last </table> on the site

What you are doing is reducing the code to a manageable size to isolate the issue.
save and view the page

juggledad Feb 27, 2013 08:59 AM

next remove every thing from the end of the atahualpa css ie after the </style> thru just before the </head> statement
save and view the page.

juggledad Feb 27, 2013 09:01 AM

next remove the following
HTML Code:

<a href="http:www.linkedin.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/LinkedIn-Active-45.png" class="alignnone" alt="linkedin"></a>&nbsp;

<a href="http:www.facebook.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/Facebook-Active-45.png" class="alignnone" alt="facebook"></a>&nbsp;

<a href="http:www.pinterest.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/Pinterest-Active-45.png" class="alignnone" alt="pinterest"></a>&nbsp;

<a href="http:www.twitter.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/Twitter-Active-45.png" class="alignnone" alt="twitter"></a>&nbsp;

<a href="http:www.instagram.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/instagram-45.png" class="alignnone" alt="instagram"></a>

save and view the page.

now tell me what you have and what happens when you hover over the menu items.

cabdziner Feb 27, 2013 09:35 AM

ok... got this done

juggledad Feb 27, 2013 09:52 AM

now tell me what you have and what happens when you hover over the menu items.

cabdziner Feb 27, 2013 10:04 AM

all I have is the menu and it still moves when I hover. The menu links have a dotted border (except for the current page) and the link border disappears when I hover over any of them.

juggledad Feb 27, 2013 11:16 AM

Quote:

The menu links have a dotted border (except for the current page) and the link border disappears when I hover over any of them.
this is the key! the border changes when you hover and a border takes up some room so it causes the shift.

now look at the same page with firefox and see what happens to the various elements when you hover. In the firebug 'style' tab there is a ':hover' check off so you can see what CSS is applied on a hover. Look at the various elements and shut some of them off to see what happens (clicking next to a css rule puts a red circle with a slash and shuts off the rule.)

cabdziner Feb 27, 2013 12:10 PM

Thanks Juggledad... found the culprit. You're the best.

juggledad Feb 27, 2013 01:35 PM

Now you know how much time goes into find 'simple' answers


All times are GMT -6. The time now is 02:00 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.