Empty div issue in IE8...

Empty div issue in IE8...

Hello! As my office is launching an iPhone app we ordered, I wanted to make some eye candy ad on our home page using jQuery...

An #action div is over a #pub div... When hovering #action, children of #pub pop out separately (iphone, red, black and blue banners)




As I'm just a beginner in jQuery, I tried this :

CSS
  1. body {margin: 0; padding: 0;}
    #iphone {
        position: absolute;
        top: 60px;
        left: -80px;
    }

    #action {
        position: absolute;
        top: 60px;
        width: 155px;
        height: 406px;
        z-index: 100;
        cursor: pointer;
    }

    #pub {
        z-index: 0;
    }

    a img {border: none;}

    #nouveau {
        position: absolute;
        top: 200px;
        left: -159px;
    }

    #app {
        position: absolute;
        top: 252px;
        left: -136px;
    }

    #picto {
        position: absolute;
        top: 310px;
        left: -56px;
    }







































HTML + jQuery

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#action").mouseover(function(){
                $("#iphone").stop().animate(
                    {
                        left: '0'
                    }
                )
                $("#nouveau").stop().delay(250).animate(
                    {
                        left: '0',
                        top: '180px'
                    }
                )
                $("#app").stop().delay(500).animate(
                    {
                        left: '0',
                        top: '232px'
                    }
                )
                $("#picto").stop().delay(750).animate(
                    {
                        left: '0',
                        top: '290px'
                    }
                )
            })
            $("#action").mouseout(function(){
                $("#iphone").stop().animate(
                    {
                        left: '-80px'
                    }
                )
                $("#nouveau").stop().delay(250).animate(
                    {
                        left: '-159px',
                        top: '200px'
                    }
                )
                $("#app").stop().delay(500).animate(
                    {
                        left: '-136px',
                        top: '252px'
                    }
                )
                $("#picto").stop().delay(750).animate(
                    {
                        left: '-56',
                        top: '310px'
                    }
                )
            })
           
            $("#action").click(function(){
                window.location = "http://urltodownloadapp.com";
            })
           
        });
    </script>

    </head>
    <body>
    <div id='action'></div>
    <div id='pub'>
        <div id='iphone'><img src='iphone.png'/></a></div>
        <div id='nouveau'><img src='nouveau.png'/></div>
        <div id='app'><img src='app.png'/></div>
        <div id='picto'><img src='picto.png'/></div>
    </div>
    </body>







































































So, when you hover #action, all contents of #pub get animated and slide in page... And when you click, you go download the app...
Worked very well in Firefox, but was a failure in IE8, where hovering got a strange behaviour.

So i tried this fix by my own, using a transparent png of 1x1 px, being not sure of what I was doing...

  1. <div id='action'><img src='1x1.png' width='155px' height='406px'/></div>
Now it works like a charm in IE8... Cool, but why didn't it work before??? Working on empty div with given width and height can't be done in IE8?

Can anyone tell me if my javascript can be improved?