Jump to content

Image Width:100% Doesn't Scale Height In Ie8


Recommended Posts

http://woodturningvt.com/betagallery.htmI'm having an issue with an image in my gallery. Click the top left sample and it opens up a lightbox. The image displayed is set to a max-width of 60%. In all the other browsers, and in IE7, it auto-scales the height. I know that width:xx% is deprecated, but I want the image to display properly regardless of the screen size, resolution or window size, and this seems to be a good quick way to do so without javascript.I've managed to work around the issue by making IE8 emulate IE7, but I'm hoping there's a better way around this. Take a look at my code and tell me what you think.
<!-- Mimic Internet Explorer 7 --><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>Gallery - Rosato Woodturning</title><style type="text/css">.popupdiv {	background:		url(images/site/transpbg.png);	height: 			100%;	width: 				100%;	display: 			none;	text-align: 	center;	position: 		fixed;		top: 				0px;		left: 			0px;		z-index: 		100;}#subdiv {	margin: 25px auto;	width: 	75%; } #subdiv img {	max-width:	60%;	width: 			750px;	height:			auto;	margin: 		0px auto;	padding: 		0px;	border: 		none; }#subdiv p {	background:		#fff;	margin: 			0px auto;	padding: 			0 2em;	text-align: 	left;	width: 				55%;	overflow-y: 	scroll;	max-height:		9em;	font-size: 		.75em;	line-height:	150%;}<div class="pagecontent gallery">	<div class="imgcontainer">		<a href="java script:void(0);" onclick="showWindow('bowl1-1')"><img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /></a>	</div>		<div class="popupdiv" id="bowl1-1">			<div id="subdiv">				<img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1"/>					<p><a href="java script:void(0);" onclick="CloseWindow('bowl1-1')">CLOSE</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor rutrum 						massa	ac fringilla. Proin fringilla tincidunt dui, et condimentum nulla viverra vitae. Proin ipsum mauris, suscipit ac adipiscing ut, porttitor eu velit. 						Vivamus blandit orci vel justo sagittis viverra. In hac habitasse platea dictumst. Ut id eros sodales arcu facilisis tristique a cursus metus. Praesent 						iaculis egestas turpis sed hendrerit. Etiam eros eros, iaculis a ultrices in, sagittis in erat. Curabitur tristique purus eu nisi euismod ut rutrum mauris 									tincidunt. Quisque sit amet sem nunc. Sed sed eleifend lacus. </p>			</div> <!-- END .subdiv -->		</div> <!-- END .popupdiv -->	<!-- END #bowl1-1 -->

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...