Databases
StackOverflow2013
Postsdbo
POIE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
    primarykey
    data
    text
    <p>I am having trouble with the .hover() method in IE8, it works ok in Chrome and Firefox but IE8 is... well we're not friends today.</p> <p>The site is for my friend but currently I have it residing on my test domain <a href="http://www.wordade.com/arceramics/" rel="nofollow">here</a>.</p> <p>I have checked my markup on W3C Validator and it is all ok. Hufff... I just don't know what's wrong.</p> <p>Here is the observed problem;</p> <p>There is a nav bar that has some links on it, these links reside in the nav bar like this;</p> <pre><code>&lt;div id="nav_bar"&gt; &lt;img id="nav_block" src="images/main/nav_block.png" alt="" /&gt; &lt;a id="nav_home" class="nav_link" href="home.php"&gt; &lt;span id="nav_holder_home" class="nav_holder"&gt;Home&lt;/span&gt; &lt;/a&gt; &lt;a id="nav_about" class="nav_link" href="home.php"&gt; &lt;span id="nav_holder_about" class="nav_holder"&gt;About&lt;/span&gt; &lt;/a&gt; &lt;a id="nav_services" class="nav_link" href="home.php"&gt; &lt;span id="nav_holder_services" class="nav_holder"&gt;Services&lt;/span&gt; &lt;/a&gt; &lt;a id="nav_gallery" class="nav_link" href="home.php"&gt; &lt;span id="nav_holder_gallery" class="nav_holder"&gt;Gallery&lt;/span&gt; &lt;/a&gt; &lt;a id="nav_contact" class="nav_link" href="home.php"&gt; &lt;span id="nav_holder_contact" class="nav_holder"&gt;Contact&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <p>The <em>nav block</em> is an image that sits behind the links and I move it using my jQuery code like so;</p> <pre><code>$(document).ready(function(){ var current_pos = 0; var hover_pos = 0; $('.nav_holder').hover(function() { $("#nav_block").stop(true, false); if ($(this).attr("id") == "nav_holder_home") { hover_pos = 0; } else if ($(this).attr("id") == "nav_holder_about") { hover_pos = 1; } else if ($(this).attr("id") == "nav_holder_services") { hover_pos = 2; } else if ($(this).attr("id") == "nav_holder_gallery") { hover_pos = 3; } else if ($(this).attr("id") == "nav_holder_contact") { hover_pos = 4; } $("#nav_block").animate({ marginLeft: (hover_pos*98) }, 200 ); }, function () { $("#nav_block").animate({ marginLeft: (current_pos*98) }, 200 ); }); $('.nav_holder').click(function() { if ($(this).attr("id") == "nav_holder_home") { current_pos = 0; } else if ($(this).attr("id") == "nav_holder_about") { current_pos = 1; } else if ($(this).attr("id") == "nav_holder_services") { current_pos = 2; } else if ($(this).attr("id") == "nav_holder_gallery") { current_pos = 3; } else if ($(this).attr("id") == "nav_holder_contact") { current_pos = 4; } }); }); </code></pre> <p>I have set some z-index bits in css like this;</p> <pre><code>a.nav_link { font: 18px/100px Tahoma, Arial, sans-serif; z-index: 10; } #nav_bar { position: absolute; top: 0px; left: 490px; width: 490px; height:110px; background-color:#f0f0f0; overflow: visible; } #nav_block { position: absolute; top: 0px; left: 4px; width: 90px; height:110px; z-index: 9; } .nav_holder { width: 98px; height:100px; text-align: center; overflow: visible; z-index: 11; } </code></pre> <p>You can clearly see that the z-index of the block is behind the link and the span in the navbar but in IE8, when the block moves underneath the cursor you get it seemingly interfering with the .hover() method. However if the cursor is over the text in IE8 it is ok, but the whitespace which should be ok is not.</p> <p>Try hovering and slowly moving around in the navigation (over the text and over the whitespace) in IE8 to see the problem to see what I mean. Look at it in Crome or FF to see it working correctly.</p> <p>What is IE8 not liking in this code? It is driving me mad ^^</p> <p>(Also, what's the problem with the 408's today?!?!)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USNeilos
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POIE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThere are issues in some browsers using `z-index` on elements that are not `position:absolute`. It's likely because the DOM position implies a `z-index` that conflicts with a `z-index` setting. I've personally avoided the issue by not using `z-index` on anything that isn't `position: absolute` - using DOM order instead.
      singulars
      1. POIE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
      1. USjfriend00
    2. COThis article might help: http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex.
      singulars
      1. POIE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
      1. USjfriend00
    3. COI removed all the z-index and overflow bits but the problem still exists.
      singulars
      1. POIE8 not working correctly with .hover() and .animate() in jQuery. Chrome and FF are ok, typical
      1. USNeilos
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload