Проблема с width в IE7

frol · July 31, 2009

Такой я человек, что всегда пытаюсь решить проблему самостоятельно, не надеясь на окружающих... Но не в этот раз, вынудили таки мягкотелые обратиться к народу.

Имеется трабл с width: 100%. Вот пара скринов:

Дочерний блок

Родительский.

Html:

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" href="templates/css/reset.css" type="text/css" />
		<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
		<script src="/templates/js/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="/templates/js/dropmenu.js" type="text/javascript"></script>
		<script src="/templates/js/jquery.timers.js" type="text/javascript"></script>

		<script type="text/javascript">

		</script>

		<title></title>

	</head>

	<body>
		<div class="page">
			<div class="topmenuleftwrapper">
				<div class="topmenuleft"></div>
				<div class="topmenucenter">
					<ul>
						<li> <a href="#" title="О нас">О нас</a></li>
						<li> <a href="#" title="Жителям">Жителям</a>
							<ul>
								<li> <a href="#" title="Подраздел">Подраздел</a></li>
								<li> <a href="#" title="Подраздел">Подраздел</a></li>
								<li> <a href="#" title="Подраздел">Подраздел</a>
									<ul>
										<li> <a href="#" title="Подраздел">Подраздел</a></li>
										<li> <a href="#" title="Подраздел">Подраздел</a>
											<ul>
												<li> <a href="#" title="Подраздел">Подраздел</a></li>
												<li> <a href="#" title="Подраздел">Подраздел</a></li>
												<li> <a href="#" title="Подраздел">Подраздел</a></li>
											</ul>
										</li>
										<li> <a href="#" title="ПодразделПодразделПодразделПодразделПодраздел">ПодразделПодразделПодразделПодразделПодраздел</a>
											<ul>
												<li> <a href="#" title="Подраздел">Подраздел</a></li>
												<li> <a href="#" title="Подраздел">Подраздел</a></li>
												<li> <a href="#" title="Подраздел">Подраздел</a></li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li> <a href="#" title="Корпоративным клиентам">Корпоративным клиентам</a></li>
					</ul>
				</div>
				<div class="topmenuright"></div>
			</div>

			<div class="topmenurightwrapper">
				<div class="topmenuleft"></div>
				<div class="topmenucenter">
					<ul>
						<li>
							<form action="#">
								<input type="text" id="search" value="Поиск" />
								<input type="button" id="srch" value="↵"></input>
							</form>
						</li>
						<li> <a href="#" title="s">s</a></li>
						<li> <a href="#" title="f">f</a></li>
						<li> <a href="#" title="g">g</a></li>
					</ul>
				</div>
				<div class="topmenuright"></div>
			</div>

			<div class="clear"></div>

			<div class="header">
				<div class="mainback">
					<div class="logo"></div>
				</div>
			</div>
			<div class="largebox"><span class="warning">Under construction<br /> Сайт находится в разработке</span></div>
			<div class="box">С наступлением жарких дней Мосводоканалом зафиксировано увеличение водопотребления в мегаполисе до 3 млн. 600 тыс. куб/м. Вчера, 13 июля, москвичи использовали, выпили и вылили на себя в душе на 100 тыс. кубометров больше, чем в обычные дни. Пик разбора воды пришелся на 23.00. </div>
			<div class="box">В сравнении с последними годами рекордным этот объем воды не назовешь: водопотребление в столице с каждым годом уменьшается. Только за первое полугодие 2009-го снижение объемов производства воды достигло 6,5%. Нынешним летом средний уровень составляет 3 млн. 500 тыс. куб/м в стуки или 270 литров на человека в сутки. Свою лепту вносят и летние месяцы, когда многие москвичи покидают городские квартиры, уезжая на подмосковные дачи и отправляясь в отпуска.  </div>
			<div class="box">Но в качестве основных причин, повлиявших на снижение водопотребления в столице, специалисты предприятия называют спад промышленного производства и повсеместную установку общедомовых  и квартирных счетчиков, которые заставляют москвичей экономить воду. Однако жизнь показывает - в жару не до экономии! Кстати, 14 июля прошлого года было таким же жарким днем, и москвичи тогда поставили рекорд, «выпив» 3 млн. 972 тыс. куб/м. </div>
			<div class="footer_guarantor"></div>
		</div>

		<div class="footer">
			<div class="footbox">
				<ul>
					<li>Авторизация</li>
					<li><a href="#" title="Вход">Вход</a></li>
					<li><a href="#" title="Вход">Регистрация</a></li>
				</ul>
			</div>
			<div class="footbox">
				<ul>
					<li>Разделы</li>
					<li><a href="#" title="Управление многоквартирными домами">Управление многоквартирными домами</a></li>
					<li><a href="#" title="Техническая эксплуатация жилых домов">Техническая эксплуатация жилых домов</a></li>
					<li><a href="#" title="Ремонт и отделка">Ремонт и отделка</a></li>
					<li><a href="#" title="Эксплуатация коллекторов и водостоков">Эксплуатация коллекторов и водостоков</a></li>
					<li><a href="#" title="Цены на платные услуги населению">Цены на платные услуги населению</a></li>
				</ul>
			</div>
			<div class="footbox">
				<ul>
					<li>Инфо</li>
					<li><a href="#" title="О компании">О компании</a></li>
					<li><a href="#" title="Контакты">Контакты</a></li>
					<li><a href="#" title="О сайте">О сайте</a></li>
					<li><a href="#" title="Соглашение">Соглашение</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

CSS:

html {
	/*———— 100% высота контейнера div.page далее */
	height: 100%;
	/*————*/

	background: #fff;
}

body {
	/*————— 100% высота контейнера div.page далее */
	min-height:100%;
	height: 100%;
	/*—————*/

	background: #fff;

	color: #000;
	font-weight: normal;
	font-family: Arial, Verdana, Helvetica, Sans-Serif;
}

A{

}

input{
	font-size:0.75em;
	background-color:#f1f1f1;
	border:none;
}

input#srch{
	height:19px;
	width:20px;
	border:1px solid #d7d7d7;
	border-bottom:1px solid #333333;
	border-right:1px solid #333333;
}

input#search{
	width:8em;

}



/* Контейнер всего содержимого кроме подвала */
div.page {
	background: url('img/head_grad.png') repeat-x;
	width: 908px;
	margin: auto;

	/*———————-- 100% высоты контейнера относительно клиентской области и контента для IE, FF, Opera */
	height: auto !important;
	min-height:100%;
	height: 100%;
	/*———————--*/

	border-right:solid 1px gray;
	border-left:solid 1px gray;
}

/* блок гарантирующий, что область на коотрую накладывается div.footer в div.page останется пустой, */
/* наличие этого блока устанавливает высоту div.page 100% относительно клиентской области и контента в FF, Opera */
div.page div.footer_guarantor {
	clear:both;
	height: 180px;
}

/* Контейнер подвала */
div.footer {
	margin: auto;
	margin-top: -180px;
	width: 908px;
	height: 180px;

	background: url('img/foot_grad.png') repeat-x;
	border-right:solid 1px gray;
	border-left:solid 1px gray;
}

/* Контейнер шапки */

div.page div.header {
	height: 247px;

}

/* Патч для установки минимальной высоты в IE */

div.page div.patch_minheight {
	width: 1px;
	height: 250px;
	float: right;
}


/* Контейнер основной полосы */

div.page div.mainbar {
	width: 908px;
	overflow: hidden;

	background: #fff;
}



.topmenuleftwrapper, .topmenurightwrapper, .topmenuleft, .topmenuright, .topmenucenter{
	z-index:20;
	color:white;
	font-size: 1em;
}


div.topmenuleftwrapper, div.topmenurightwrapper{
	margin-left:15px;
	margin-right:15px;
}

div.topmenurightwrapper{
	float:right;
}

div.topmenuleft, div.topmenuright {
	width:18px;
	height:34px;
	float:left;
}

div.topmenuright{
	background:url('img/topmenu_right.png');
}

div.topmenuleft{
	background:url('img/topmenu_left.png');
}

div.topmenucenter{
	background:url('img/topmenu_center.png') repeat-x;
	height:34px;
	float:left;
	background-color:gray;
}

div.topmenucenter ul{
	display:block;
}

div.topmenucenter ul li{
	padding-top:4px;
	float:left;
	padding-right:5px;
	padding-left:5px;
	position:relative;
	display: inline;
	z-index: 20;
}

div.topmenucenter ul li a{
	font-size:0.85em;
	color:white;
	display:block;
	height:20px;
	text-decoration:none;
	z-index: 20;
	width: 100%
}

div.topmenucenter ul li ul{
	position:absolute;
	display:none;
	z-index: 20;
}


div.topmenucenter ul li ul li{
	width:100%;
	display: block;
	float: none;
	background:url('img/topmenu_center.png') repeat-x;
	border-left:1px solid #d7d7d7;
	border-top:1px solid #d7d7d7;
	border-bottom:1px solid #333333;
	border-right:1px solid #333333;
	right:5px;
	font-size:0.95em;
	height:17px;
}

div.topmenucenter ul li ul li:hover{
	width:100%;
}

div.topmenucenter ul li:hover{
	background:url(img/topmenu_center_hover.png);
	display:block;
}


div.topmenucenter ul li ul li ul{
	top:0;
}




div.logo{
	background:url('img/3sm_logo.png');
	width:253px;
	height:247px;
	margin:0 auto;
}

div.mainback{
	background:url('img/mainback.jpg');
	width:908px;
	height:236px;
}

div.slides{
	float:right;
	margin-right:15px;
}



div.box, div.middlebox, div.largebox{
	background:white;
	padding:15px;
	width:252px;
	margin:15px 0px 15px 15px;
	float:left;
}

div.middlebox{
	width:551px;
}

div.largebox{
	width:848px;
}

div.footbox{
	padding:15px;
	margin-right:80px;
	font-size:0.85em;
	line-height: 1.5;
	color:gray;
	float:right;
}

div.footbox A{
	color:#336699;
	font-size:0.9em;
}


span.warning{
	color:orange;
	font-size:3em;
	text-align:justify;
}


.clear{
	clear:both;
}

Вопрос: и какого х*я, Валера? =). Почему же блок не растягивается на 100% по правилам css?

Заранее спасибо за помощь.

Searcher · August 3, 2009

если у всех родителей не указана ширина, то броузер не знает от чего считать 100%

frol · August 8, 2009

то есть без явного указания ширины не обойтись?

Searcher · August 10, 2009

Вариант 1: у всех предков нужно указать абсолютную или относительную ширину, тогда можно указывать проценты.

Вариант 2: использовать яваскрипт для подсчета у установки текущей ширины.

Sign In

Проблема с width в IE7

Question

frol

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

frol

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information