Divs shift in IE7

This site is best viewed in a modern browser with JavaScript enabled.

greenhouse

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

tobiash

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

/*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

sarang_ubale

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

greenhouse

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.