CODEWITHSUNDEEP
jquerycssinternet-explorer-8
PaulP
PaulP

Reputation: 1935

IE8 position: absolute;

This code in firefox move yellow box to the right about 20px but in IE8 it move 20px over the page (it's clipped).

    #box1, #box2 {
        width: 100px; 
        height: 100px; 
    }

    #box1 { 
        background: yellow; 
        position: absolute;
    }

    a {
        position: absolute;
        top: 300px;
    }


<div id="wrapper">
    <div id="box1"></div>

    <a href="#">Link</a>
</div>

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function(){
            $('a').click(function(){
                $('#box1').animate({
                    right: '-=20px'
                    });
            });
    });
</script>

Are there any hacks which make ie behave like firefox in this case?

Upvotes: 2

Views: 1431

Answers (2)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

It is a good practice to specify the location of an absolute element that is animated by some offset. You are running a relative animation (-=) and internally jQuery subtracts 20 pixels from the current value of right and since right is not found, jQuery subtracts 20 from 0, which moves the box to the far right.

This means that actually Firefox is not rendering the correct way, IE8 and Chrome move the box to the far right.

To fix this in all browsers, you need to specify the initial location:

  #box1 { 
    background: yellow; 
    position: absolute;
    right: 30px;
  }

Edit: If you don't know beforehand the position of your box1, then my solution and Sotiris solution might not work for you. So, if specifying the initial location in CSS doesn't work for you, can do this trick:

    $(function(){
        $('a').click(function(){
            $('#box1').
               css('left', $('#box1').position().left + 'px').
               animate({
                  left: '+=20px'
               });
        });

and leave the CSS to what it was before

#box1 { 
    background: yellow; 
    position: absolute;
}

Upvotes: 1

Sotiris
Sotiris

Reputation: 40046

instead use right, use left: '+=20px'. Also add in your css left:20px for #box1.

demo: http://jsfiddle.net/RqfwE/1/

Upvotes: 3

Related Questions