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.

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.

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

yes please

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.

ok... ready

Next edit the file and remove everything from just after the

<title>Main « Melissa Leeper</title>

thru just before the <style for all the atahualpa styling
save and view the page

then remove everything from

<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

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.

next remove the following

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

ok... got this done

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

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.

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.)

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

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