www.webdeveloper.com
Results 1 to 4 of 4

Thread: Divs shift in IE7

  1. #1
    Join Date
    Oct 2011
    Posts
    2

    Divs shift in IE7

    The Divs holding the "In Stock" banners (absolutely positioned) on this page seem to shift to the right (the first box is missing a banner, and there is an extra banner off the page. Why is this?

    http://www.woodflooringvalue.com/bamboo1?groupid=19

  2. #2
    Join Date
    Oct 2011
    Posts
    1

    RE: Divs shift in IE7

    When setting an absolute position the left and top attributes of the element will be calculated by the browser if not set. Internet explorer 7 has always been a bit unpredictable with this task.

    At the page you specified IE7 calculates the left attribute of the "feature-banner_150px"-div differently than the other browsers. The other calculate the position to the top left corner of its parent, which is expected. IE7 however takes into account the sibling-element "instock-product-frame", which has "float:left" set, and sets the left position of the "feature-banner_150px"-div to the right edge of its sibling plus the margins of both elements. This is why the "In stock" banners are out of position.

    Try removing the "float: left" attribute of the "instock-product-frame"-div. This should not make any difference since it is the only element included in the layout logic within its parent and its parent has an explicit size set. However when doing this IE7 will again act differently from the other browsers by suddenly ignoring the margin-top property of the element, making it move a bit too high. Solve this by setting a relative position with top attribute set to the same as margin-top (7px in this case). This should be browser specific css since it will mess up layout in other browsers. Google "ie7 specific css" to find out how to do that, f.e. http://www.webdevout.net/css-hacks

    Code:
    /*Remove float attribute*/
    .instock-product-frame {
      /*float: left*/
      ...
    }
    
    /*Should be IE7 specific*/
    .instock-product-frame {
      position: relative;
      top: 7px;
    }
    Hope this helps

    Tobias Heldring
    Netlight Consulting

  3. #3
    Join Date
    Oct 2011
    Posts
    1

    Smile

    Hi,

    #instock-product-container {
    float: right;
    height: 360px;
    margin-left: 17px;
    margin-top: 7px;
    position: relative;
    width: 154px;
    }

    .feature-banner_150px {
    height: 93px;
    left: 50px;
    margin: 0;
    /* margin-left: 51px;*/
    position: absolute;
    width: 107px;
    z-index: 10;
    }

    May this will resolve your problem.

    Regards,
    Sarang Ubale

  4. #4
    Join Date
    Oct 2011
    Posts
    2
    Thank you, removing the float did resolve the issue in IE7. However, in other browsers the banners floated above the box rather then touching the top of the box. So frustrating.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles