cssfreakie Posted January 28, 2011 Share Posted January 28, 2011 Hi all i am having a little difficulty stretching an image in a div. It works perfect for ie8/9 and firefox, but ie 7 and lower don't like it at all. Any help or tips are welcome Here is the css i used: /* meyers reset is above this */ body{ background:#AAD400; } #wrapper{ background:#cccccc; width:960px; margin:0 auto; border: 1px dotted #888; } #header{ width:960px; height:300px; background: url(../images/imagestretch/header.png)no-repeat; border: 1px dotted red; float:left; } #middle{ width:960px; height: 500px; /*100px too much on purpose */ border: 1px dotted blue; float:left; clear:both; } #middle img#stretchy{ width:960px; height:100%; } #footer{ width:960px; height:300px; background: url(../images/imagestretch/footer.png)no-repeat; border: 1px dotted orange; float:left; } and the markup <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/imagestretch.css" /> <title>stretch an image in a div</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="middle"> <img id="stretchy" src="images/imagestretch/mid.png" alt="" /> </div> <div id="footer"> </div> </div> </body> </html> here is an example hosted of the above: http://tinyurl.com/6j2vyh4 Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted January 28, 2011 Author Share Posted January 28, 2011 OK i think i fixed something by using the code below but there still is one problem: In IE 7 and lower now show a small space between the middle div and the footer div. I have the impression this is caused by the image, but i am not sure. This little space is not showing between the header and middle div. if someone could please take a look it would make me pretty happy the css: body{ background:#010706; } #wrapper{ width:960px; margin:0 auto; } #header{ width:960px; height:424px; background: url(../images/header.png) no-repeat; float:left; } #header-content{ } #middle{ position:relative; width:960px; height:auto; /* adjust height to content */ float:left; clear:both; } #middle img#stretchy{ width:960px; height:100%; } #footer{ width:960px; height:273px; background: url(../images/footer.png) no-repeat; float:left; } and the mark up <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> <!--[if lte IE 7]> <![endif]--> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="middle"> <img id="stretchy" src="images/imagestretch/mid.png" alt="" /> </div> <div id="footer"> </div> </div> </body> </html> -edit: see below Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted January 28, 2011 Author Share Posted January 28, 2011 omg IE is such a facking ridiculous browser. the space caused between the bottom was caused by a newline in the markup.....!?@wtf! so my markup now look pretty ugly to solve this for ie 7 and lower: <div id="wrapper"> <div id="header"> <div id="header-content"> </div> </div> <div id="middle"><img id="fancy" src="images/gradiant.png" alt="" /></div> <div id="footer"> </div> </div> Does anyone know if there is a way to do this more cleaner, because i hate reading a mark-up like this Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.