Question

I’ve been having some major issues with a layout I’m making specifically in Internet Explorer. I know IE converts width and heights differently when there is borders and padding, so I included codes in my css to make the navigation look the same in IE as in Mozilla and Chrome.

The issue I’m having now is though is that I have jquery animation running on my navigation and it is messing up in IE, most of it due to the height differences between my Mozilla/Google code and the specifics for IE. I have looked around on several sites and I created a separate jquery file with the height parameters to make the navigation look fine in IE, but for some reason IE is pulling from menu.js instead of the iemenu.js

I found several sites with different bits of code to try and force IE to read iemenu.js instead of menu.js while the other browsers read menu.js. Unfortunately, for some reason IE will not read iemenu.js, instead reading menu.js.

I have tried

<script type="text/javascript">var runFancy = true;</script>
<script>runFancy = true;</script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
</script> // <script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

<script type="text/javascript" src="menu.js"></script>

I have also tried

<!--[if IE 9]>
<script type="text/javascript" src="iemenu.js"></script>
<![endif]--> 

Another I found that didnt work as well:

<!--[if lt IE 9]>
<script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

Another issue I’m having is the animation, which causes the navigation to shrink in height then go back to it’s normal size when the mouse is taken away, is extremely glitchy when I include padding in the css to make the text move down a bit. I have tested this without the padding and the animation works fine, but about half of the text cuts off after it does the animation. I have also tried using the hoverintent plugin which did not fix the glitching problem.

Here is a sample of the navigation css:

.nav1 {
 width:96px;
 bottom:0;
 right: 311px;
 height:45px;
 font-size:20px;
 font-family:Verdana, Geneva, sans-serif;
 color:#ffffff;
 padding-top:15px;
 padding-bottom:0px;
 display: inline-block;
 position:absolute;
 text-align:center;
 border:1px solid;
 border-bottom:0px;
 border-color:#000000;
 background: url("images/navbg.jpg") no-repeat;
 }

 * html .nav1 {
\width: 96px; /* for IE5 and IE6 in quirks mode */
 w\idth: 98px; /* for IE6 in standards mode */
 \height: 61px; /* for IE5 and IE6 in quirks mode */
 h\eight: 62px; /* for IE6 in standards mode */
 }

And here is the jquery code. Both iemenu.js and menu.js are built the same, they just have different values for height:

$(function() {

$('.nav1').hover(function() {
    $(this).stop().animate({height:30, right: 311}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 311}, 300);
});

 $('.nav2').hover(function() {
    $(this).stop().animate({height:30, right: 408}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 408}, 300);
});

  $('.nav3').hover(function() {
    $(this).stop().animate({height:30, right: 505}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 505}, 300);
});


  $('.nav4').hover(function() {
    $(this).stop().animate({height:30, right: 602}, 300);
}, function() {
    $(this).stop().animate({height:45, right: 602}, 300);
});



});

I have tried nearly every IE fixer trick in the book I know and have found online both here and on other sites and nothing seems to be working so far….I work on IE 7.

Also, for reference if it helps, I have been putting the if IE codes after my other script html and before

Answer 1

Try it like this:

<script type="text/javascript">var runFancy = true;</script>
<script>runFancy = true;</script>
<script type="text/javascript" src="menu.js"></script>
<!--[if IE]>
<script type="text/javascript">
runFancy = false;
</script> // <script type="text/javascript" src="iemenu.js"></script>
<![endif]-->

In this case menu.js will be loaded first and iemenu.js will be loaded afterwards. And if the functions are the same, the iefunction will overwrite the “normal” function and it should work.