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 )
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!