...

View Full Version : IE7, you are not playing! Image stretch below parent DIV



bongobongo
08-05-2010, 05:18 PM
Hi

I have a div where I want to use two vertical images as border.

I also want the images to stretch vertically in relation to the height of div.

Works in IE6, IE8, Firefox, and Chrome (have not tested other browsers yet), but not in IE7.
IE 7 make the border images in example below, stretch all the way towards the bottom of the outer idv, far below the div in question.


Does anyone know how I prevent IE7 to stretch the two border images below their parent container?

I also noticed that if I set a fixed height for the relative positioned div then the height of the two images are correct in IE7... but this is not a fix for me though, since I do not know the height of the div.

Here is code used:

Please use attached images if you want to test this.
Nice way to test this in multiple browsers are here:
https://browserlab.adobe.com/en-us/index.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.quoteStretch {
height:100%;
}

/* next is hack to make it work in IE6 */
* html .quoteStretch {
height:expression(
this.parentElement.offsetHeight+'px'
);
}
</style>
</head>
<body>

<div style="width:300px; height: 400px; margin: 50px auto 0 auto; border: 1px solid red;">
<div style="position:relative; width:100%; border-bottom:1px solid gray;">
<img src="path-to-image/siteborder-left.jpg" width="1px" height="1px" class="quoteStretch" style="position:absolute; top:0px; left:-22px; z-index:auto; width:22px;" />
<img src="path-to-image/siteborder-right.jpg" width="1px" height="1px" class="quoteStretch" style="position:absolute; top:0px; right:-23px; z-index:auto; width:23px;" />

<div style="display:block; padding:15px;">

Text comes here
<br />
Text comes here

</div>
</div>
</div>
</body>
</html>

bongobongo
08-06-2010, 08:25 AM
NOTE: The images attached is not the one that I actually use. For the images I use the image change both vertically and horizontally, so I cannot use
background image and background repeat. But the images attached do show how IE7 does not manage to honor the height of the div the images is placed
within.

Hope someone can explain to me why IE7 does not play, and if there is a way to make it work on IE7 as well?

bongobongo
08-06-2010, 09:05 AM
Found a solution that seems to work (if anyone know about a better solution please post it here):



<!--[if IE 7]>
<style type="text/css">
.quoteStretch {
height:expression(
this.parentElement.offsetHeight+'px'
);
</style>
<![endif]-->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum