Why does my website menu move around in Internet Explorer only?

Question

I programmed a website with a fixed menu on the top, but in the Internet Explorer 11 it moves around for half a second or something like that when I click a button in the menu. In other browsers it works fine. What can I change to remove the bug, I think it has to do with my CSS code.

Here is a link to my website, take a look at it with IE and click the buttons on the top for seeing what the problem is :) http://www.ivan.ilic.hg-gf.de/index.html

It would be very nice if someone could help me. I want the buttons to be the same in IE and Mozilla, Chrome. I think that the IE is always a bit different to the other browsers.

Here is my CSS code for the Navigation menu:

    /* CSS Menu Navigation Bar */

    #cssmenu

    {   
       position: relative;  
       margin: 0 auto;
       clear: both; 
    }

    #cssmenu a 
    {       
       list-style: none;
       margin: 0;
       padding: 0;
       border: 0;
       line-height: 1.5; 
    }

    #cssmenu li 
    {   
       border: 1px solid transparent;
       padding-top: 7px;
       display: block; 
       float: right; 
       margin: 0 10px;
    }

    #cssmenu ul
    {
        margin: 0 auto;
        padding: 0;
        text-align: center;
        padding-right: 20px;
        margin-bottom: -70px;
        max-height: 80px;
    }

    #cssmenu li a 
    {  
        padding-top: 10px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 10px;   
        width: 70px;

        border: 1px solid #dfdfdf;
        text-decoration: none;  
        display: block;

        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -khtml-border-radius: 2px;      

        font-size: 17px;
        font-family: Verdana, Tahoma;
        color: #292F33;
   }

   #cssmenu li:hover a 
   {  
        border-bottom: 3px solid #30B0FF;   
        display: block;
        color: #30B0FF;
        clear: both;

        font-size: 17px;
        font-family: Verdana, Tahoma;

        transition-duration: 0.05s;
        transition-delay: 0.03s;
   }

  /* screen smaller than 1325px */

  @media only screen and (max-width : 1325px),
  only screen and (max-device-width : 1325px)
  {
       #menu
       {
          min-width: 1020px;
       }

       #cssmenu li a 
       {        
          padding-top: 10px;
          padding-right: 0px;
          padding-left: 0px;
          padding-bottom: 10px; 

          width: 60px;      
          font-size: 15px;
          border: 1px solid transparent;

       }

       #cssmenu li:hover a 
       {        
          font-size: 15px;  
       }
  }

And here is the important HTML code:

<!-- Menu -->       

    <div id="menu">     

        <li style="list-style: none;"> <img id="image" src="images/head.png"/><br><i>&nbsp;{by Ivan Ilic}</i></li>

        <div id='cssmenu'>      

            <ul>                                        

                <li><a href='lazarus.html'>Lazarus</a></li> 
                <li><a href='scratch.html'>Scratch</a></li>
                <li><a href='html.html'>HTML</a></li>
                <li><a href='c-sharp.html'>C#</a></li>
                <li><a href='c++.html'>C++</a></li>
                <li><a href='index.html'>Home</a></li>                  

            </ul>       

        </div>

    </div>      

Answer 1

The "flash" you're seeing is the default active background color. When you click, it flashes gray, which gives the appearance of movement. You need to have a CSS Style Reset to override the default background color in IE. Alternatively, you can simply change the active style itself.

Example:

:active { background:transparent; }

The style reset will prevent most cross-browser styling differences by overriding all the different default styles that browsers tack on. I tested this with F12 Developer Tools and it eliminated the flash.

Edit:

The use of document.write() to add the style sheet is slowing down in IE. Essentially the content is being painted, and then "fixed" once the styles are loaded. Link the style sheet without JS and the flash will disappear.