Именение valign контейнера в зависимости от содержимого :-(
Разрешив проблему с центрированием блока по горизонтали (спасибо огромное Carpus-у) - столкнулся с чем-то совсем уж странным и тоже бьюсь уже несколько часов над решением :(
Есть вот такая вот конструкция:
и в CSS
И суть в том, что этот самый .leftdarkgray должен находиться в самом верху родительского блока (как ему это и положено делать) и сам по себе, он так и делает. Но как только я вставляю в него
так он тут же делает какой-то отступ от верхней линии #leftcolumn
причем:
1. В референсном W3C браузере Amaya - всё отображается нормально, т.е. как я и планирую.
2. В Firefoxe, если я отключаю в нем внутренние дефолтовые настройки CSS - тоже становится нормально.
И если я для
выставляю margin: 0px; - тоже нормально. (но это же не выход)
3. В IE - никак не нормально =))
***
И при этом, смотрел специально - перемещается именно блок <div class="leftdarkgray"> а не
.
Как такое может быть, чтобы потомок влиял на предка? о_О
Уже выставлял vertical-align: top, везде где это возможно... Не помогает.
Я просто не понимаю что может влиять в данном случае на перемещение блока, какой именно параметр.
Для div у меня стоит margin:0; padding:0;
***
В общем, суть в том, что без текста нормально, а с текстом - ненормально - ползёт вниз от верхней линии...
Кто-нибудь знает решение такой проблемы?
Есть вот такая вот конструкция:
Код:
<div id="body">
<div id="leftcolumn">
<div class="leftdarkgray">
Текст!</p>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="leftdarkgray">
Текст!</p>
</div>
</div>
</div>
и в CSS
Код:
#body {
width: 889px;
display: block;
position: relative;
}
#leftcolumn {
width: 196px;
display: block;
position: absolute;
}
.leftdarkgray {
background-color: #e6e6e7;
background-image: url(lotus_pics/363636.gif);
width: 100%;
height: 33px;
color: #e6e6e6;
text-align: center;
}
width: 889px;
display: block;
position: relative;
}
#leftcolumn {
width: 196px;
display: block;
position: absolute;
}
.leftdarkgray {
background-color: #e6e6e7;
background-image: url(lotus_pics/363636.gif);
width: 100%;
height: 33px;
color: #e6e6e6;
text-align: center;
}
И суть в том, что этот самый .leftdarkgray должен находиться в самом верху родительского блока (как ему это и положено делать) и сам по себе, он так и делает. Но как только я вставляю в него
Код:
Текст!</p>
так он тут же делает какой-то отступ от верхней линии #leftcolumn
причем:
1. В референсном W3C браузере Amaya - всё отображается нормально, т.е. как я и планирую.
2. В Firefoxe, если я отключаю в нем внутренние дефолтовые настройки CSS - тоже становится нормально.
И если я для
выставляю margin: 0px; - тоже нормально. (но это же не выход)
3. В IE - никак не нормально =))
***
И при этом, смотрел специально - перемещается именно блок <div class="leftdarkgray"> а не
.
Как такое может быть, чтобы потомок влиял на предка? о_О
Уже выставлял vertical-align: top, везде где это возможно... Не помогает.
Я просто не понимаю что может влиять в данном случае на перемещение блока, какой именно параметр.
Для div у меня стоит margin:0; padding:0;
***
В общем, суть в том, что без текста нормально, а с текстом - ненормально - ползёт вниз от верхней линии...
Кто-нибудь знает решение такой проблемы?
Не совсем понятно, как же должен выглядеть текст абзаца. И почему бы не использовать padding: 0;? В общем вот что у меня получилось (проверено в IE 6, FF 1.0.6, Opera 8.5):
Код:
<!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" lang="ru" xml:lang="ru">
<head>
<title>valign test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#body {
width: 889px;
display: block;
position: relative;
color: #000;
background-color: #fff;
}
#leftcolumn {
width: 196px;
display: block;
position: absolute;
border: solid 1px red;
}
.leftdarkgray {
float: left;
background-color: #e6e6e7;
background-image: url(lotus_pics/363636.gif);
width: 100%;
height: 33px;
color: #e6e6e6;
text-align: center;
}
.leftdarkgray p {
margin: 0;
padding: 0;
line-height: 33px;
color: #000;
background-color: #e6e6e7;
}
</style>
</head>
<body>
<div id="body">
<div id="leftcolumn">
<div class="leftdarkgray">
Текст!</p>
</div>
</div>
</div></body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>valign test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#body {
width: 889px;
display: block;
position: relative;
color: #000;
background-color: #fff;
}
#leftcolumn {
width: 196px;
display: block;
position: absolute;
border: solid 1px red;
}
.leftdarkgray {
float: left;
background-color: #e6e6e7;
background-image: url(lotus_pics/363636.gif);
width: 100%;
height: 33px;
color: #e6e6e6;
text-align: center;
}
.leftdarkgray p {
margin: 0;
padding: 0;
line-height: 33px;
color: #000;
background-color: #e6e6e7;
}
</style>
</head>
<body>
<div id="body">
<div id="leftcolumn">
<div class="leftdarkgray">
Текст!</p>
</div>
</div>
</div></body>
</html>
Твой пример действительно работает.
Перенес его в существующий контекст дизайна - в Амайя и Фаефоксе работает (немного по-разному...) - IE всё-равно выкаблучивается... :(
Окей. Буду копаться. Возможно там раньше чего-то ему мешает...
Еще раз спасибо!
Перенес его в существующий контекст дизайна - в Амайя и Фаефоксе работает (немного по-разному...) - IE всё-равно выкаблучивается... :(
Окей. Буду копаться. Возможно там раньше чего-то ему мешает...
Еще раз спасибо!
Кажется нашел я вторую часть проблемы - только радостней от этого не стало :D
То есть вот такой вот код (простая полоска высотой 5 пикселей):
отображаться в IE 6 именно как 5px почему-то отказывается... P( Везде 5 пикселей, а в IE ~15-20 если на-глаз прикинуть...
То есть вот такой вот код (простая полоска высотой 5 пикселей):
Код:
<!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" lang="ru" xml:lang="ru">
<head>
<title>valign test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#toplinethin {
background-color: #e6e6e7;
height: 5px;
width: 889px;
}
</style>
</head>
<body>
<div id="toplinethin"></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>valign test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#toplinethin {
background-color: #e6e6e7;
height: 5px;
width: 889px;
}
</style>
</head>
<body>
<div id="toplinethin"></div>
</body>
</html>
отображаться в IE 6 именно как 5px почему-то отказывается... P( Везде 5 пикселей, а в IE ~15-20 если на-глаз прикинуть...