singlepost

[Решено - HTML,CSS, IE lt 7] Неправильное позицирование блока с текстом << На главную или назад  

Собственно,вот
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.

3 ответов в теме “[Решено - HTML,CSS, IE lt 7] Неправильное позицирование блока с текстом”

  1. 3
    Александр Парфенов ответил:

    особенно это актуально если элементов подобного стиля много… когда элемент в единственном экземпляре id достаточно. В данном случае использование id оправдано.

  2. 2
    Тимур Ярматов ответил:

    вместо idеще классы можно попробовать использовать

  3. 1
    Александр Парфенов ответил:

    <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>

    Если я все правильно понял.

Клуб программистов работает уже ой-ой-ой сколько, а если поточнее, то с 2007 года.