Moving divs + array with text in jquery, problem in IE

Question

Hello,

Please see the following website (http://www.intra-interieur.be/www) in Firefox, chrome, safari, .. It works fine. Then, open it in IE (7 or 8, doesn't matter). It doesn't really work :-). You can view the source of whatever you want, but here are the important things.

I think the array with text that is being replaced is causing the other problems (the moving divs not functioning correctly).

$('#menu ul li.home').addClass('active');

        var msgs = [ "ga hier", "bekijk dit", "misschien dit", "of zelfs hier" ];
        var msgs_length = msgs.length;

        $("#menu ul li a").click(function () { 
             $('#menu ul li.active').removeClass('active');
             $(this).parent().addClass('active');
             $('.go', this).text("u bent hier");

             $("#menu ul li a").not(this).each(function(i) {
                 $('.go', this).text(msgs[i % msgs_length]);
             });
        });

And the menu:

<div id="menu">
        <ul>
            <li class="home"><a href="#home" class="panel">home / <span class="go">u bent hier</span></a></li>
            <li class="clearfloats"></li>
            <li class="about"><a href="#about" class="panel">over intra / <span class="go">ga hier</span></a></li>
            <li class="clearfloats"></li>
            <li class="cases"><a href="#cases" class="panel">projecten / <span class="go">bekijk dit</span></a></li>
            <li class="clearfloats"></li>
            <li class="photos"><a href="#photos" class="panel">foto's / <span class="go">misschien dit</span></a></li>
            <li class="clearfloats"></li>
            <li class="contact"><a href="#contact" class="panel">contact / <span class="go">of zelfs hier<span></span></a></li>
        </ul>
    </div>

Does anyone see the problem? I really can't figure out why IE is behaving so badly. Of course, it's IE but :-)

Thanks alot!

Answer 1

For starters, don't float your LIs and use "clearfloats". Actually, don't style your LIs at all.

Style the A-tags instead. Use width + margin-left, display:block to achieve the same appearance.