Собственно,вот
langoost com/services.html
–
В ИЕ 7 и ниже наблюдаю забавный эффект – background для otherpage_bg_middle, зацикленный по repeat-y, рендерится как хочет То есть, то нет.
Хак с добавлением свойства height:1%/ 100% / auto
приводит к тому,что часть текста из otherpage_txt залазит под плашку otherpage_bg_top,
и никаким z-index'ом его не достать.
HTML:
<div id="otherpage_content">
<div id="otherpage_bg_top"></div>
<div id="otherpage_bg_middle">
<div id="otherpage_txt">
'.$page_data['html'].'
</div>
</div>
<div id="otherpage_bg_bottom"></div>
</div>
–
CSS:
#otherpage_content {
clear:both;
width:515px;
margin-left:15px;
min-height:500px;
}
#otherpage_bg_top {
width:515px; height:172px;
background: url('other_bg_top.png') no-repeat;
}
#otherpage_bg_middle {
padding: 10px 40px;
background: url('other_bg_repeated.png') repeat-y;
}
#otherpage_bg_bottom {
width:515px; height:17px;
background: url('other_bg_bottom.png') no-repeat;;
margin-bottom:25px;
}
#otherpage_txt {
display: block;
z-index: 10;
background:transparent;
margin-top:-150px;
text-indent:15px;
color:#E3E2E2;
font-family:Verdana;
font-size:14px;
}
–
otherpage_bg_top – верхняя часть плашки, высотой в 100 пх
otherpage_bg_middle – серединка плашки, зацикленная repeat-y
otherpage_txt – Текст страницы, затянутый выше на 150 px отрицательным margin'om, чтобы текст начинался не в конце верхней плашки, а "как надо".
otherpage_bg_bottom – нижняя часть плашки.
–
Буду благодарен,если подскажите как реализовать задуманное кроссбраузерно и без отрицательного margin'a.
24 марта 2010 в 13:00
особенно это актуально если элементов подобного стиля много… когда элемент в единственном экземпляре id достаточно. В данном случае использование id оправдано.
23 марта 2010 в 23:05
вместо idеще классы можно попробовать использовать
25 февраля 2010 в 10:02
<html>
<head>
<style>
#otherpage_content {
margin-left:15px;
}
#otherpage_bg_top {
width:515px; height:100px;
background: url('other_bg_top.png') #674593 no-repeat;
}
#otherpage_bg_middle {
background: url('other_bg_repeated.png') #ff0000 repeat-y;
mrgin-top: 100px;
width:515px;
}
#otherpage_bg_bottom {
width:515px; height:17px;
background: url('other_bg_bottom.png')#00ff00 no-repeat;;
margin-bottom:25px;
}
#otherpage_txt {
width: 515px;
text-indent:15px;
color:#E3E2E2;
font-family:Verdana;
font-size:14px;
}
</style>
</head>
<body>
<div id="otherpage_content">
<div id="otherpage_bg_top">TOP</div>
<div id="otherpage_bg_middle">
<div id="otherpage_txt">
'.$page_data['html'].'<br/><br/><br/><br/><br/>324
</div>
</div>
<div id="otherpage_bg_bottom">bottom</div>
</div>
</body>
</html>
Если я все правильно понял.