We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links.
Despite trying different float values, rearranging the layout elements, and exploring various alternatives, we have been unable to resolve the jumping problem. We have noticed that the jumping is influenced by the length of text in the nav bar links; shortening the text labels reduces the jumping effect.
This issue has been observed on iPads, as well as on Chrome running on Windows 7 Home Premium and OS X 10.7.5.
Below is the HTML code for the nav bar:
<div id="header">
<div class="main">
<a class="logo" href="/"><img class="" src="/images/web/logos/text_small.png" alt="Domain Name Registration and Search"></a>
<div class="nav_bar">
<a class="games icon_rise" href="/itunes-store/apps/free-apps/category/all-games?itunes-store-id=888-6014">
<div class="icon"></div>
<div class="label click_drop">Games</div>
</a>
<a class="education icon_rise" href="/itunes-store/apps/free-apps/category/education?itunes-store-id=6017">
<div class="icon"></div>
<div class="label click_drop">Education</div>
</a>
...
</div>
</div>
</div>
And here is the CSS:
#header { text-align:left; height:75px; background:url(/images/web/header_slice.png) repeat-x; }
#header .logo { position:relative; top:15px; width:106px; display:inline-block; }
...
#header .nav_bar a:hover { text-decoration:none }
To reproduce this issue:
1) Visit www.tekiki.com. Upon first visit, observe the nav bar links at the top jumping.
2) To replicate the error, press Shift-F5.
3) A screenshot capturing the phenomenon of the nav bar links jumping is attached below.