CODEWITHSUNDEEP
jqueryanimationaccordioninternet-explorer-8
Travis Smith
Travis Smith

Reputation: 359

JQuery accordion bug in IE 8? Workaround?

To see this accordion animation bug, go to http://hopplayground.com/ with Internet Explorer 8 (IE8)

Click on "Bios". The first click on a menu item should open the submenu. But it doesn't, nothing appears. The second click kind of closes the menu, but leaves artifacting. Using other menus works correctly.

Question: What is causing this glitch, and is there a way to solve it or work around it?

I'm using jQuery 1.4.2 with jQuery UI 1.8.2. The functionality works perfectly in Firefox and Safari.

TTFN Travis

Upvotes: 8

Views: 12915

Answers (5)

Erik Grosskurth
Erik Grosskurth

Reputation: 3932

I got this from another post:

Here is the link to it: Why won't jQuery accordion section activate in IE 8?

I ran into this same problem. IE is very finicky about proper html and making sure that inside your accordion, there is nothing outside the

structure, for example, it you have this:

<h3>a header</h3>
<div>some content</div>
<h3>another header</h3>
<div>some more content</div>

it will work, but this will not:

<h3>a header</h3>
<div>some content</div>
<span>extra stuff</span>
<h3>another header</h3>
<div>some more content</div>

This would all be inside whatever element you call .accordion() on.

Upvotes: 0

Andy
Andy

Reputation: 151

Just thought i would throw my two cents in. Based on mVChr's answer, you could use:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

By setting it to edge it forces IE to use the latest rendering engine available. I had the same problem, and this was a fix for me.

This guys website talks more about it if your looking for more info:

http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation

Upvotes: 4

Andrew Howard
Andrew Howard

Reputation: 31

Based on RikawaS's response...

On your accordion headers only, place the following css code:

.accordionHeader { display: table; width: 100%; }

If you find that the headers still jump when hovering between them, use a border-top using a solid colour rather than using margin and padding. Of course this only works on designs ontop of solid colours (the border colour would need to match the background colour). Heres an example:

.accordionHeader { border-top: 10px solid #FFFFFF; }

This will fix IE8 right up! This has taken me a year to figure out lol.

Upvotes: 1

RikawaS
RikawaS

Reputation: 11

you can add styles to the accordion like: .accordion {display:table} because of ie has some problem with display:inline which jquery uses...

Upvotes: 1

mVChr
mVChr

Reputation: 50205

Not sure what the problem is, so if a workaround will do instead of a solution, the page works for me in IE7 so you can add the following meta tag into your document <head>:

  <meta http-equiv="X-UA-Compatible" content="IE=7" />

This will force IE8 into IE7 compatibility mode. Using this tag reduces cross-browser issues.

Upvotes: 8

Related Questions