Повторяющиеся по ширине окна браузера фоны при фиксированном макете.

Zzzlaya · October 24, 2011

В фиксированном макете есть повторяющиеся по горизонтали фоны.

во всех браузерах, кроме IE7 (для IE6 верстка не делалась), отображается корректно:

в IE7:

как видите, отсчет фона начинается от края элемента с фиксированной шириной, а не от края окна браузера.

буду благодарна за идеи по устранению этой проблемы.

html:


<!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">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
</head>

<body>
<div id="bg_header">
</div>
<div id="bg_menu_up">
</div>
<div id="bg_breadcrumbs">
</div>
<div id="bg_footer">
</div>
<div id="wrapper">
</div><!-- #wrapper -->
</body>
</html>

css:


* {
	margin: 0;
	padding: 0;
}
html{
height: 100%;
width:100%;
min-width:942px;
}
body {
	font: 12px/18px Tahoma, Arial, Verdana, sans-serif;
	width: 100%;
	color: #000;
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
}
a {
	color: #3399cc;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 942px;
	margin: 0 auto;
	position:relative;
}
#bg_header {
	background: url(images/header_bg.gif) 50% 0% repeat-x;
	width:100%;
	height:5px;
	position:absolute;
	z-index:1;
	top:0px;
}
#bg_menu_up {
	background: url(images/menu_up_bg.gif) 50% 0% repeat-x;
	width:100%;
	height:63px;
	position:absolute;
	top:164px;
}
#bg_breadcrumbs {
	background: url(images/breadcrumbs_bg.gif) 50% 0% repeat-x;
	width:100%;
	height:61px;
	position:absolute;
	top:458px;
}
#bg_footer {
	background: url(images/footer_bg.gif) 50% 0% repeat-x;
	width:100%;
	height:5px;
	position:absolute;
	z-index: 1;
	bottom:98px;
}

прим. свойства body дополнены в связи с ещё одной полоской фона в футере.

Sign In

Повторяющиеся по ширине окна браузера фоны при фиксированном макете.

Question

Zzzlaya

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information