ie 7 и absolute

Chris · July 7, 2012


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" type="text/html" charset="utf-8" />
		<link rel="stylesheet" href="CSS/style.css" type="text/css">
		<link rel="stylesheet" href="CSS/reset.css" type="text/css">
		<title>Империя Комфорта</title>
	</head>
	<body>
		<div id="wrapper">
			<div id="main">
				<div id="header">
					<div id="phone">
						<a href="index.html"><img src="images/logo.png" width="415" height="111"></a>
						<p>
							+7 (928) 374-57-95<br>
							+7 (961) 464-57-78
						</p>
					</div>
					<div id="circle">
						<img src="images/circle.png" width="87" height="25">
						<a href="address.html">Контакты</a>
					</div>
				</div>
				<div id="content">
					<div id="left">
						<div id="slide">
							<img src="images/img-1.png" width="508" height="217">
						</div>
						<div id="box">
							<div id="first" class="profile">
								<img src="images/kbe.png" width="191" height="88">
								<div>
									<h3>Профиль КBЕ Энджин</h3>
									<ul>
										<li>Окна "КBЕ Энджин" долговечны</li>
										<li>Прекрасно сохраняют тепло</li>
										<li>Не пропускает уличные копоть и пыль</li>
										<li>Система уплотнений в двух плоскостях исключает продувание</li>
										<li>Эксплуатационные расходы на ПВХ окна - низкие: их не надо ремонтировать и перекрашивать</li>
									</ul>
								</div>
							</div>
							<div class="profile">
								<img src="images/montblanc.png" width="191" height="88">
								<div>
									<h3>Профиль Montblanc</h3>
									<ul>
										<li>Сохраняет неизменность форм, белизну и другие физико-механические характеристики</li>
										<li>Выдерживает перепады температуры -60°С - +50°С</li>
										<li>Устойчив к слабым кислым и щелочным растворам</li>
										<li>Не подвергается воздействию бактерий и микроорганизмов.</li>
										<li>Не боится влаги и легко моется обычными неабразивными средствами.</li>
									</ul>
								</div>
							</div>
							<div class="profile">
								<img src="images/Novotex.png" width="191" height="88">
								<div>
									<h3>Профиль Novotex</h3>
									<ul>
										<li>Главным достоинством разработанной системы профилей является ее адаптированность именно к российским условиям эксплуатации.</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div id="right">
						<ul>
							<li><a href="windows.html">Пластиковые окна</a></li>
							<li><a href="doors.html">Двери</a></li>
							<li><a href="#">Стеклопакеты</a></li>
							<li><a href="#">Кондиционеры</a></li>
							<li><a href="tile.html">Тротуарная плитка</a></li>
							<li><a href="shutter_systems.html">Ролставни</a></li>
							<li class="no_ind"><a href="Aluminium_design.html">Светопрозрачные <span>аллюминиевые конструкции</span></a></li>
							<li class="no_ind"><a href="Aluminium_construction.html">Фасадные <span>аллюминиевые конструкции Алюмакс</span></a></li>
						</ul>
					</div>
				</div>
				<div id="bg"></div>
				<div id="footer">
					<p id="left_par">ммм</p>
					<p>Звоните: <br>
					+7 (928) 374-57-95<br>
					+7 (961) 464-57-78
					</p>
				</div>
			</div>
		</div>
	</body>
</html>


body{
	background:#ed1c24;
}
#wrapper{
	margin:0;
	overflow:hidden;
	background:#ed1c24;
}
#main{
	background:url(../images/bg.png) no-repeat;
	width:780px;
	margin:auto;
	overflow:hidden;
}
#main_1{
	width:780px;
	margin:auto;
	overflow:hidden;
}
#header{
	width:780px;
	height:110px;
	margin: 0 0 20px;
	font-family:Tahoma, Geneva, sans-serif;
	position:relative;
}
#phone{
	margin:0;
	width:530px;
}
#phone img{
	margin:0 0 0 50px;
	float:left;
}
#phone p{
	position:absolute;
	margin:10px 0 0 340px;
	color:#fff;
}
#circle{
	margin:20px 0 0 100px;
	width:210px;
	float:left;
}
#circle img{
	float:left;
}
#circle a{
	width:60px;
	height:15px;
	text-decoration:none;
	color:#fff;
	font-size:14px;
	text-shadow:2px -2px 2px #000;
	display:block;
	margin:3px 0 0 100px;
}
#content{
	margin:0;
	width:780px;
}
#top, #bottom{
	font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
	font-size:26px;
	color:#fff;
}
#top{
	background:url(../images/strip.png) no-repeat;
}
#top p{
	padding:20px 0 0;
}
#top span, #bottom span{
	text-decoration:underline;
	font-size:18px;
}
#bottom{
	background:url(../images/strip.png) no-repeat 0 bottom;
	margin:50px 0;
	padding:0 0 30px;
}
#bottom img{
	margin:30px 0 0;
}
#slide img{
	margin:0 0 0 40px;
}
#left{
	width:580px;
	float:left;
	background:url(../images/strip-vert.png) no-repeat 545px 400px;
	padding:0 0 50px;
}
#left h3{
	font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
	font-size:22px;
	text-shadow:2px 2px 2px #000;
	font-weight:normal;
	color:#ededed;
	margin:0 0 10px 0;
	padding:0 0 0 9px;
}
#box{
	width:510px;
	margin:15px;
}
#first{
	background:none;
}
.profile{
	padding:25px 0 20px;
	background:url(../images/strip.png) no-repeat;
}
.profile img{
	float:left;
	width:191px;
}
.profile div{
	margin:0 0 0 210px;
}
.profile ul{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#f1d0d3;
}
.profile li{
	margin:7px 0;
	background:url(../images/marker.gif) no-repeat 0 4px;
	padding:0 0 0 10px;

}
#right{
	margin:0 0 0 550px;
	padding:0 0 0 10px;
	width:200px;
	font-family:"Myriad Pro", Helvetica, Arial, sans-serif;
	font-size:16px;
}
#right ul{
	width:200px;
	margin:0 0 100px;
}
#right li{
	background:url(../images/button.png) no-repeat;
	width:198px;
	height:36px;
	margin:5px 0;
	padding:9px 0 0 20px;
}
#right .no_ind{
	padding:3px 0 0 20px;
	margin:0 0 10px 0;
}
#right a{
	color:#fff;
	text-decoration:none;
	display:block;
	width:198px;
	height:36px;
}
#right span{
	font-size:12px;
}
#bg{
	background:url(../images/workers.png) no-repeat left top;
	width:780px;
	height:213px;
	margin:200px 0 0;
}
#footer{
	background:url(../images/tube.png) no-repeat 440px 0;
	width:780px;
	height:90px;
}
#footer p{
	float:left;
	font-family:Tahoma, Geneva, sans-serif;
}
#footer span{
	text-transform:uppercase;
}
#left_par{
	margin:0 90px 0 130px;
}

Как видно на картинке номера не на своем месте, во всех "нормальных" браузерах номера написаны над словом Комфорта.

Второй снимок показывает как уехало меню и вместе с ним фон #bg он отдельным дивом идет.

Буду очень признателен за помощь!

Sign In

ie 7 и absolute

Question

Chris

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information