свойство 'right': IE и FF

knell · July 11, 2007

есть такая разметка страницы

<html>
<head>
<style type="text/css">
body
{ 
	background-color: #FFFFFF;
}

#header_div, #links_div
{
	position: absolute;
	display: block;
}

#header_div 
{
	font-family: Helvetica;
	color: #990000;
	font-size: 18pt;
	height: 80px;
	right: 10px;
	left: 10px;
	top: 10px;
}

#links_div
{
	left: 10px;
	right: 10px;
	top: 100px;
	text-align: right;
	background-color: #FFE0E5;
}

#menu_div, #main_div, #right_div
{
	position: absolute;
	display: inline-block;
}

#body_div
{
	display: block;
	position: absolute;
	top: 150px;
	left: 10px;
	right: 10px;
}

#menu_div 
{
	width: 200px;
	left: 0px;
	top: 0px;
	position: relative;
}

#main_div
{
	left: 210px;
	top: 0px;
	right: 250px;
	min-width: 650px;
}

#main_div #submenu
{
	position: relative;
	left: 0px;
	top: 0px;
	display: block;
	padding: 5px 5px;
	margin-bottom: 10px;
	border: 1px solid #990000;
	text-align: justify;
}

#main_div #banners
{
	display: block;
	height: 100px;
	min-height: 100px;
	max-height: 100px;
	padding: 5px;
	background-color: #FFF0F5;
	margin: 3px 0px;
	overflow: hidden;
}

#main_div #content
{
	display: block;
}

#right_div
{
	width: 240px;
	top: 0px;
	right: 0px;
}

#copy
{
	position: absolute;
	display: block;
	left: 10px;
	right: 10px;
	padding: 15px 0px;
}

</style>
</head>

<body>

<div id="header_div">
This is a header and top banner
</div>

<div id="links_div">Here are links that are not from a catalog</div>

<div id="body_div">

	<div id="menu_div">
	There are menu items
	</div>

	<div id="main_div">

		<div id="submenu">
		These are subitems
		</div>

		<div id="banners">
		Advertisment banners
		</div>

		<div id="content">
		here is a main content
		</div>

	</div>

	<div id="right_div">
	This is a right column: news, announcements, etc.
	</div>

	<div id="copy">Copyright</div>

</div>
</body>

</html>

в Firefox 2.х отображается все чудно и правильно, в IE же све смещено в левую часть, друг на друга

подскажите, в чем поблема ???

yopopt · July 11, 2007

Нужен доктайп. К примеру quot;-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

В #body_div добавить width:100%;

В #right_div position:absolute;

knell · July 11, 2007

о! пасибочки правый слой стал как нужно.

теперь второй вопрос в FF все чудно, а в IE слои header и links сжались по размеру содержимого. Получается вот что

#header_div 
{
border:1px solid #000000;
color:#990000;
font-family:Helvetica;
font-size:18pt;
height:80px;
left:10px;
right:10px;
top:10px;
display:block;
position:absolute;
}

каким образом заставить этот убогий IE растянуть слой на всю ширину ?

photo#5085931343870145010

yopopt · July 11, 2007

Установить ширину блока в 100% (width:100%) И зачем вам указывать блочному элементу что он блочный(display:block;)?

Лучше не используйте left:10px; и right:10px;, а задайте отступы с помощью margin. К примеру в #menu_div margin-left:10px;, а в #right_div margin-right:10px;

knell · July 11, 2007

хм-хм, block для надежности, я уже разуверился в IE

вот простой пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
body
{ 
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}

#header
{
	height: 80px;
	margin: 10px 10px 0px 10px;
	width: 100%;
	border: 1px solid #000000;
}
</style>
<body>
<div id="header">
хидер
</div>
</body>
</html>

слой уезжает за правую границу. Если в FF указать: right: 10px; то этот хороший браузер отрисовывает блок так, как нужно, с отступом в 10 пикселей справа, так как написано в стандарте. А плохой IE просто не реагирует на right и при width: 100%; точно так же растягивает блок за пределы окна. Ширина блока равна ширине страницы, учитывая отступы, блок съезжает.

knell · July 11, 2007

нашел выход для ирода IE, добавил для него обертку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
*
{ 
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
#all
{
	margin: 0px;
	padding: 0px;
	left: 0px;
	top: 0px;
}
#header
{
	height: 80px;
	margin: 10px 10px 0px 10px;
	border: 1px solid #000000;
	position: relative;
}
</style>

<body>
<div id="all">
	<div id="header">
	хидер
	</div>
</div>
</body>
</html>

теперь он реагирует на правую границу. И, по-моему, понял, почему не реагировал раньше

для IE body не блочный элемент

добавил body { display: block; } и слои, у которых есть свойство right: 10px;, тут же растянулись на всю ширину.

yopopt · July 11, 2007

хм-хм, block для надежности, я уже разуверился в IE
вот простой пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
body
{ 
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}

#header
{
	height: 80px;
	margin: 10px 10px 0px 10px;
	width: 100%;
	border: 1px solid #000000;
}
</style>
<body>
<div id="header">
хидер
</div>
</body>
</html>
слой уезжает за правую границу. Если в FF указать: right: 10px; то этот хороший браузер отрисовывает блок так, как нужно, с отступом в 10 пикселей справа, так как написано в стандарте. А плохой IE просто не реагирует на right и при width: 100%; точно так же растягивает блок за пределы окна. Ширина блока равна ширине страницы, учитывая отступы, блок съезжает.

Пример корректен и работает одинаково правильно в обоих браузерах.

Sign In

свойство 'right': IE и FF

Question

knell

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

knell

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

knell

Link to comment

Share on other sites

knell

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information