За последние 24 часа нас посетили 22435 программистов и 1643 робота. Сейчас ищут 1133 программиста ...

Заезд плавающих блоков в IE за границы

Тема в разделе "HTML и CSS", создана пользователем virabhadra, 11 окт 2007.

  1. virabhadra

    virabhadra Активный пользователь

    С нами с:
    11 дек 2006
    Сообщения:
    127
    Симпатии:
    0
    Адрес:
    Praha, Czech Republic
    Добрый день всем!

    Готовлю шаблон для страницы. Схематично код выглядит так:
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2.  <head>
    3.   <title>test template</title>
    4.   <style type="text/css">
    5.    body { margin: 0; padding: 0; }
    6.    .bung { clear: left; }
    7.  
    8.    #top { background-color: red; margin: 2px 2px 0 2px; padding: 2px 2px 0 2px; border: 1px black solid; }
    9.    .topblock { background-color: yellow; width: 100px; height: 30px; margin: 0 2px 2px 0; float: left; }
    10.  
    11.    #sidebar { position: absolute; left: 2px; margin-top: 2px; background-color: brown; width: 200px; height: 600px; border: 1px black solid; }
    12.    .sideblock { margin: 2px; background-color: lightgreen; }
    13.  
    14.    #content { margin: 2px 0 2px 204px; }
    15.    .contentblock { background-color: lightblue; border: 1px black solid; margin: 2px; }
    16.    .bod { background-color: blue; width: 40px; height: 10px; margin: 1px; float: left; overflow: hidden; }
    17.   </style>
    18.  </head>
    19.  
    20.  <body>
    21.   <div id="top">
    22.    <div></div>
    23.    <div class="topblock">1</div> <div class="topblock">2</div>
    24.    <div class="topblock">3</div> <div class="topblock">4</div>
    25.    <div class="topblock">5</div> <div class="topblock">6</div>
    26.    <div class="topblock">7</div> <div class="topblock">8</div>
    27.    <div class="bung"></div>
    28.   </div>
    29.  
    30.   <div id="sidebar">
    31.    <div class="sideblock">abc def ghi klm nop</div>
    32.    <div class="sideblock">abc def ghi klm nop</div>
    33.    <div class="sideblock">abc def ghi klm nop</div>
    34.    <div class="sideblock">abc def ghi klm nop</div>
    35.    <div class="sideblock">abc def ghi klm nop</div>
    36.   </div>
    37.  
    38.   <div id="content">
    39.    <div class="contentblock">abc def ghi klm nop</div>
    40.    <div class="contentblock">abc def ghi klm nop</div>
    41.    <div class="contentblock">abc def ghi klm nop</div>
    42.  
    43.    <div class="contentblock">
    44.     <div></div>
    45.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    46.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    47.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    48.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    49.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    50.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    51.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    52.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    53.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    54.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    55.     <div class="bung"></div>
    56.    </div>
    57.  
    58.    <div class="contentblock">abc def ghi klm nop</div>
    59.    <div class="contentblock">abc def ghi klm nop</div>
    60.    <div class="contentblock">abc def ghi klm nop</div>
    61.    <div class="contentblock">abc def ghi klm nop</div>
    62.    <div class="contentblock">abc def ghi klm nop</div>
    63.    <div class="contentblock">abc def ghi klm nop</div>
    64.    <div class="contentblock">abc def ghi klm nop</div>
    65.  
    66.    <div class="contentblock">
    67.     <div></div>
    68.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    69.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    70.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    71.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    72.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    73.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    74.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    75.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    76.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    77.     <div class="bod">&nbsp;</div><div class="bod">&nbsp;</div>
    78.     <div class="bung"></div>
    79.    </div>
    80.  
    81.    <div class="contentblock">abc def ghi klm nop</div>
    82.    <div class="contentblock">abc def ghi klm nop</div>
    83.    <div class="contentblock">abc def ghi klm nop</div>
    84.   </div>
    85.  </body>
    86. </html>
    87.  
    В селом, в макете присутствующие блоки ведут себя так как от них требуется, чтобы они себя вели.
    Макет тестирую в IE и Opera.

    Проблемы две и обе в IE:
    1. Плавающие синие и жёлтые блоки (float: left;), при определённой ширине страницы, заезжают на правые границы родительского блока.
    2. Если задать в блоке "content" задний фон, то он частично закрашивает дочерние блоки.

    В Опере этих обоих проблем нет.

    Помогите, плизз, с этим справиться. :?