Jump to content
  • 0

Помогите идентифицировать баг IE6

alb

Asked by alb,

 Share

Question

alb Explorer

alb

Posted
Posted (edited)

приветствую, понадобилось тут сверстать макет, обычный трёхколоночный макет (в данном случае классический Holy Grail) с колонками одинаковой высоты и резиной в столбце контента, при компановке колонок по схеме 2-1-3 (контент - 2я колонка, идёт в коде первой, сайдбары - после неё, но потом позиционируются и т.д.). Всё разумеется отлично работает в браузерах, кроме IE6 (IE 7 рендерит правильно), для которого я сам так и не смог подобрать хака самостоятельно.

Исходник для повторения (copy-paste ready):


<!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" />
<title>Untitled Document</title>
<style>
* {border: none; outline: none; margin: 0; padding: 0;}
body {font: normal normal 10px/1.6 Verdana; position: relative; height: 100%;}

.layout-wrap {padding: 0 20em 0 25em; overflow: auto; min-width: 40em; background: #90F; height: 100%;}
.fake-wrap {float: left; position: relative; width: 100%;}
.column {float: left; position: relative; width: 100%;}

/* holy grail columns */
.aside-wrap {left: 20em; margin-right: -20em;}
.nav-wrap {margin-left: -100%; left: -20em;}
.content-wrap {left: 100%;}

/* columns content positioning */
.second-nav {width: 25em; margin-left: -100%; right: 25em;}
.aside {width: 20em; margin-right: -100%;}

ul {list-style: none;}
.column p, .column a {font: normal normal 1.4em Verdana;}


/* debug colors */
.aside-wrap {background: green; }
.nav-wrap {background: red;}
.content-wrap {background: yellow;}

/* Этот самый баг ИЕ6 */
.nav-wrap {background-image: url(gnd1.jpg); }
</style>
</head>

<body>
<div class="layout-wrap">
	<div class="fake-wrap aside-wrap">
		<div class="fake-wrap nav-wrap">
			<div class="fake-wrap content-wrap">
				<div class="column content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam at nisi mollis aliquet. Sed et risus leo, a aliquet orci. Donec hendrerit fermentum sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In fermentum tortor et tortor lacinia fringilla. Ut et est at sapien dignissim hendrerit ut ut ipsum. Vestibulum convallis posuere metus in sagittis. Nunc aliquet est elit. Donec id lacus odio, ut ultricies felis. Ut congue tristique mauris, at sodales sapien cursus et.</p>
				</div>
				<div class="column second-nav">
					<h3>Widget Name</h3>
					<ul>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
					</ul>
				</div>
				<div class="column aside">
					<h3>Widget Name</h3>
					<ul>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
						<li><a href="#" title="">Widget item name</a></li>
					</ul>
				</div>
			</div>
		</div><!-- end .inner-fake-wrap -->
	</div><!-- end .outer-fake-wrap -->
</div>
</body>
</html>

баг заключается в том, что если первой спозиционарованной колонке (в данном случае, это столбец с классом nav-wrap ) в качестве бэкграунда задать любую картинку, (здесь это .nav-wrap {background-image: url(gnd1.jpg);} но баг возникает и даже если это просто прозрачный однопиксельный .gif), то эта первая колонка теряет свои координаты, полученные при позиционировании, или что-то в роде этого, то есть, визуально это представлено на скринах:

1. в качестве бэкграунда для неё задан просто цвет .nav-wrap {background: red;}

8a7e243088a8.png

2. в качестве бэкграунда задана картинка background-image: url(gnd1.jpg);

bb25b5037e98.png

во всех других браузерах (и почти браузерах) это должно выглядеть как-то так:

f901da97cfbc.png

собственно, подскажите как можно это дело профиксить (актуально только для ИЕ6)

Спасибо.

Edited by alb
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Vlad Explorer

Vlad

Posted
Posted

Очень похоже на описание вот этого бага

http://haslayout.net/css/Leaking-Background-Bug

Решение в общем-то традиционное для IE — добавить zoom: 1 к основному контейнеру, это установит hasLayout.

Link to comment
Share on other sites
  • 0
alb Explorer

alb

Posted
  • Author
Posted

buddah, не, пробовал тоже, эт не помогает, вообще все бэкграунд-баги при отрицательных маргинах в ИЕ6 лечатся в основном position: relative, но у меня и так все столбцы относительно спозиционированны

psywalker, спасибо! это кажется одна из вариаций http://www.alistapart.com/articles/negativemargins/ , но тут проблема не в сверстать 3х колоночную резину по контентному столбцу, а просто разобраться в природе этого бага и способах его фикса )

Vlad, угу, спасибо, но этот случай, как я понял, вообще для бэкграунда заданного любым способом, а в моём случае, баг проявляется, если в качестве бэкгрануда используется изображение (когда он задан просто цветом, то всё ок: 1й скрин - это в ИЕ6, когда бэкграунд задан цветом, 2й - когда картинкой)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

psywalker, спасибо! это кажется одна из вариаций http://www.alistapart.com/articles/negativemargins/ , но тут проблема не в сверстать 3х колоночную резину по контентному столбцу, а просто разобраться в природе этого бага и способах его фикса )

Да поздновато ты разбираться с IE6 начал. Этот мамонт уже почти вымер. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept