Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE7, you are not playing! Image stretch below parent DIV

    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

    Code:
    <!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>
    Attached Images Attached Images   
    Last edited by bongobongo; 08-06-2010 at 09:24 AM.

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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]-->


  •  

    Posting Permissions

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