РеКбус с прокруткой экрана ы IE

styleroom · February 19, 2008

Привет! Не понимаю, что происходит с IE: при отображении страницы появляется полоса прокрутки по вертикали... В Мозилле и Опере такого нет - чистенько-аккуратненько! В чем заковыка?

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#base {
height: 100%;
width: 100%;
margin:0;
padding:0;
background-color:#FFFF99;
}
#top {
position:absolute;
top:0;
width: 100%;
height: 15px;
background-color:#48447b;
}
#mid {
position:absolute;
margin-top:-225px;
top: 50%;
width: 100%;
height: 450px;
background-color:#FFFFFF;
}
#bot {
position:absolute;
width: 100%;
height: 15px;
background-color:#48447b;
margin-top:-15px;
top: 100%;
}
#top2 {
width: 100%;
height: 55px;
background-color:#48447b;
}
#mid2 {
position:absolute;
margin-top:-25px;
top: 50%;
width: 100%;
height: 50px;
background-color:#666666;
}
#bot2 {
position:absolute;
width: 100%;
height: 55px;
background-color:#48447b;
margin-top:-55px;
top: 100%;
}
#uzko_verh {
width: 100%;
height: 15px;
background-color:#48447b;
margin-top:5px;
}
#uzko_niz {
position:absolute;
width: 100%;
height: 15px;
background-color:#48447b;
margin-top:-75px;
top: 100%;
}
#flash {
position:absolute;
width: 100%;
height: 300px;
background-color:#FF6600;
margin-top:-375px;
top: 100%;
}

</style>
</head>

<body>
<div id="base">
	<div id="top"></div>
	<div id="mid">
		<div id="top2"></div>
			<div id="uzko_verh"></div>
			<div id="flash"></div>
			<div id="uzko_niz"></div>
		<div id="bot2"></div>
	</div>
	<div id="bot"></div>
</div>
</body>
</html>

Scrum · February 19, 2008

очень много мусора, вы недавно начали работать со слоями ?

VFK · February 19, 2008

#bot {

position:absolute;

width: 100%;

height: 15px;

background-color:#48447b;

margin-top:-15px;

top: 100%;

100% + 15px = полоса прокрутки

styleroom · February 20, 2008

to VFK: но вот здесь-то не появляется полоса прокрутки =

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#base {
height: 100%;
width: 100%;
background-color:#FFFF99;
}
#top {
width: 100%;
height: 30px;
background-color:#00CCFF;
}
#mid {
position:absolute;
margin-top:-150px;
top: 50%;
width: 100%;
height: 300px;
background-color:#33FF33;
}
#bot {
position:absolute;
width: 100%;
height: 30px;
background-color:#CC99CC;
margin-top:-30px;
top: 100%;
}
#top2 {
width: 100%;
height: 30px;
background-color:#FF0000;
}
#mid2 {
position:absolute;
margin-top:-25px;
top: 50%;
width: 100%;
height: 50px;
background-color:#666666;
}
#bot2 {
position:absolute;
width: 100%;
height: 30px;
background-color:#CCCCFF;
margin-top:-30px;
top: 100%;
}
</style>
</head>

<body>
<div id="base">
	<div id="top"></div>
	<div id="mid">
		<div id="top2"></div>
		<div id="mid2"></div>
		<div id="bot2"></div>
	</div>
	<div id="bot"></div>
</div>
</body>
</html>

VFK · February 20, 2008

Добавьте font-size: не превышающий высоту этого блока.

Пример:

#bot {
position:absolute;
width: 100%;
height: 15px;
background-color:#48447b;
margin-top:-15px;
top: 100%;
font-size:1px;
}

Mordraug · February 20, 2008

То же самое решается с помощью line-height:1px;

Дело в том, что IE в блочных элементах еще учитывает line-height шрифта, тоесть нужно либо для этого блока указывать размер шрифта меньше высоты, либо line-height с теми же целями.

Это справедливо для любых блочных элементов, которые по высоте меньше высоты шрифта, указанного на странице.

styleroom · February 20, 2008

сработало font-size:1px;

line-height:1px - не сработало...

ту VFK и Mordraug: спасибо большое за подсказку и разжевку!

Sign In

РеКбус с прокруткой экрана ы IE

Question

styleroom

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

VFK

Link to comment

Share on other sites

styleroom

Link to comment

Share on other sites

VFK

Link to comment

Share on other sites

Mordraug

Link to comment

Share on other sites

styleroom

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information