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 Link to comment https://forums.phpfreaks.com/topic/225995-little-difficulty-with-stretching-an-image-inside-a-div/ 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 Link to comment https://forums.phpfreaks.com/topic/225995-little-difficulty-with-stretching-an-image-inside-a-div/#findComment-1166742 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 Link to comment https://forums.phpfreaks.com/topic/225995-little-difficulty-with-stretching-an-image-inside-a-div/#findComment-1166748 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.