I make up such a block

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

styles

 #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; }

google chrome everything looks right alt text

in other browsers (Mozilla, Opera, s) blocks are moving apart

alt text

apparently, the case is in a given negative margin-top field: -338px; at #teaser, because if you remove it, the blocks become as it should (screen from Mozilla)

alt text

but, of course, #teaser is moving down. Trying to remove a negative top margin from #teaser and wrap it in a separate div with a margin-top: -338px; gave nothing, the blocks are also leaving. Tell me, how can I solve this problem?

The code is too big to lay out on jsfiddle, so in case anyone wants to see, lay out what's done, the archive http://rghost.ru/41470371

    2 answers 2

    1. Why do #logo - height: 311px; ? Remove or if you want to reduce.
    2. At #teaser set overflow: hidden; move to #header after .box and remove the margin-top: -338px;

      #teaser-image Why didn't they put it on float left? Put him float:left; . margin-left: 351px; and position: relative; clean up altogether.