Странности с подвалом в IE

KLiMaT · February 16, 2009

Доброго времени суток, вопрос этот наверно поднимался тыщу раз. Я в верстке новичек, почитал о css, стал делать страничку. Решил прижать подвал к низу страницы. Поизощрался, вроде вышло, но есть одно но. При открытии страницы IE v7 появляется полоса прокрутки типо подвал не наехал вверх, если страницу обновить то все делается нормально. Собстенно вопрос, в чем дело?

Upd: глянул в 6ой версии IE, там с подвалом все нормально, но появилась новая напасть, левая колонка оказываеться сдвинута за грань экрана, почему?

Upd: С левой колонкой разобрался как то непонятно считается минусовое значение margin. Но появился новый вопрос, средняя колонка начинает уменьшаться при изменении размеров окна, почитал насчет того что min-width не работает в IE6, воткнул width: expression(document.body.clientWidth > 1024 ? "100%" : "1024px"); в body. Но всеравно уменьшается, хотя окно с размером меньше 1024 получает скрол снизу. Подумал воткнуть в center-col это же только со значение 664 (1024 - левая и правая колонки ), нo IE6 при изменении размера окна стал тупо виснуть.

Upd: проблема с левой колонкой была из-за опечатки, надо подсветку врубить было.

html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>something</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteiner">
	<div id="header">		
		<div id="head-text1">
			текст шапки 1
		</div>
		<div id="head-text2">
			текст шапки 2
		</div>
	</div>
	<div id="middle-part">
		<div id="left-col">
			Левая колонка
		</div>
		<div id="center-col">
			<div id="mmenu">
				Менюшка
			</div>
			<div id="page-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</div>
		</div>
		<div id="right-col">
			Правая колонка
		</div>
	</div>
	<div id="footer-ciper">
	</div>
</div>
<div id="footer">
	Подвал
</div>
</body>
</html>

и вот css

html, body {
	margin: 0;
	padding: 0;
	min-width: 1024px;
	height: 100%;
	font-size: 1em;
	color: #333;
}

#conteiner {
	position: relative;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#header {
	width: 100%;
	height: 150px;
}
#head-text1 {
	width: 315px;
	height: 70px;
	overflow: hidden;
	position: absolute;
	left: 250px;
	top: 20px;
}
#head-text2 {
	width: 190px;
	height: 45px;
	overflow: hidden;
	position: absolute;
	left: 800px;
	top: 100px;
}
#middle-part {
	margin: 0 180px 0 180px;
	padding-bottom: 50px;
}
#left-col {
	width: 180px;
	float: left;
	margin-left: -180px;
	display: inline;
	position: relative;
}
#center-col {
	width: 100%;
	float: left;
}
#mmenu {
	height: 21px;

}
#right-col {
	width: 180px;
	float: right;
	margin-right: -180px;
	display: inline;
	position: relative;
}
#footer-ciper {
	width: 100%;
	height: 50px;
	clear:both;
}
#footer {
	width: 100%;
	position: relative;
	margin-top: -50px;
	height: 50px;
	clear: both;
}

Edited February 16, 2009 by KLiMaT

Sign In

Странности с подвалом в IE

Question

KLiMaT

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information