Верстаю такой блок
<!-- Teaser -->
<div id="teaser">
<div id="teaser-text">
<h3><a href="">Стеклянные фартуки для кухни</a></h3>
<p>Мы расскажем вам чем отличаются стеклянные фартуки и что нужно знать для того чтобы правильно заказать фартук.</p>
</div>
<div id="teaser-image">
<img src="images/image.png" alt=""/>
</div>
<a href="" class="prev-button"></a>
<a href="" class="next-button"></a>
<div class="teaser-effect"></div>
<div class="clear"></div>
</div>
<!-- /Teaser -->
стили
#teaser {
width: 952px;
height: 256px;
margin: 0 auto;
margin-top: -338px;
position: relative;
}
#teaser #teaser-text {
float: left;
background: url('../images/teaser_text_backgroung.png') 0 0 no-repeat;
width: 219px;
height: 200px;
padding: 18px 30px 38px 102px;
position: relative;
z-index: 999;
}
#teaser #teaser-image {
width: 601px;
height: 256px;
margin-left: 351px;
position: relative;
z-index: 999;
}
в гугл хром всё выглядит как надо
в остальных браузерах (мозилла, опера, ие) блоки разъезжаются
судя по всему, дело в заданном отрицательном поле margin-top: -338px; у #teaser, потому что если его убрать, то блоки становятся как надо (скрин из мозиллы)
но, разумеется, #teaser при этом съезжает вниз. Попытка убрать у #teaser отрицательное верхнее поле и обернуть в отдельный див с margin-top: -338px; ничего не дала, блоки так же разъезжаются. Подскажите, как можно решить эту проблему?
Код слишком большой, чтобы выкладывать на jsfiddle, поэтому на случай, если кто захочет посмотреть, выложу что сделано, архивом http://rghost.ru/41470371