Child div not 100% width in IE7

Hey all!

I am having issues where a child div will not go to 100% width of its parent, it only seems to go as far as the content it contains therefore the background will not fully repeat.

This is only happening in IE7 (surprise :eek:)

IE7

FireFox

The code I am using is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>Popup Test</title>
	<style type="text/css">
		* {
			margin: 0; padding: 0;
		}
		.popup {
			position: fixed;
			top: 50px; left: 50px;
			
			background-color: #14120f;
			border: 5px solid #479ddd;
			
			min-width: 300px;
		}
			.popup-close {
				position: absolute;
				top: 5px; right: 5px;
			}
				.popup-close a {
					display: block;
					width: 24px; height: 24px;
					background-color: #479ddd;
					text-indent: -999999em;
				}
			.popup .title {
				width: 100%;
				height: 47px;
				background: #2285c4;
			}
				.popup .title h1 {
					width: 100%;
					font-size: 18px;
					line-height: 47px;
					color: #FFF;
				}
			.popup-content {
				padding: 17px;
				font-size: 14px;
				position: relative;
				min-height: 75px;
				color: #FFF;
			}
			.popup-footer {
				height: 60px;
				width: 100%;
				line-height: 60px;
				text-indent: 10px;
				border-top: 1px solid #252321;
				font-size: 17px;
				font-weight: bold;
				background: #2285c4;
			}
	</style>
</head>
<body>
	<div class="popup">
		<div class="popup-close">
			<a href="#">X</a>
		</div>
		<div class="title">
			<h1>Select your location</h1>
		</div>
		<div class="popup-content">
			<p>
				Ut Oh! Nothing like IE7 is there!
			</p>
		</div>
		<div class="popup-footer">
			Press esc to close
		</div>
	</div>
</body>
</html>

Thanks in advance!

Hi,

The problem is that IE7 doesn’t see the min-width as being a width for the fixed positioned elements and just shrink wraps. You’d need to set a width for IE7 to honour the dimensions.


*+html .popup{width:300px}


I couldn’t see another fix but there may well be another one ;).

Hi Paul,

Thank you very much. Ideally I need it to be a liquid with. However, as the actual .popup-content div is populated with AJAX I could just set width and height after loading in the content.

Thanks again.