проблема с плавающим div в IE7

Я пытаюсь использовать второе фоновое изображение с плавающим div, но оно не работает в IE6 и 7.

Я знаю, что плавающий div - это проблема * в IE7 и более ранних версиях, но мне действительно нужно заставить его работать.

вот код, который я использую

<body style="background-color:#FFFFFF; margin-top:0px; margin-right:0px;" topmargin="0"       rightmargin="0" leftmargin="0">
<div id="bg2" style="float:right; top:0px; width:450px; height:151px; margin-right:0px; padding-right:0px; font-size:1px; overflow:visible; background-image:url(images/back2.jpg);"></div>

<center>

<div style="position:relative; top:0px; width:1050px; margin:0px; padding:0px; vertical-align:top; text-align:left;">
....(huge div container)...

Я также попытался удалить атрибут ширины из div, который содержит второе фоновое изображение, затем получить размер окна и добавить разницу в div контейнера в качестве левого атрибута с помощью Jquery. Он отлично работал во всех версиях IE, но на этот раз не в Chrome.

вот экран печати

Любые идеи, пожалуйста?


css background-image css-float internet-explorer-7
person Onur Kucukkece    schedule 26.12.2010    source источник
comment
Почему вы перемещаете #bg2 вправо? Вместо этого вы можете выровнять «тело» вправо и избавиться от этого поплавка! Это исправит это.   -  person Ahmad Alfy    schedule 27.12.2010
comment
Я пытался разместить контейнер в центре страницы, извините, я должен упомянуть об этом раньше   -  person Onur Kucukkece    schedule 27.12.2010

Ответы (1)


arrow_upward
0
arrow_downward

.. ну на самом деле я думаю, что нашел свое решение.

Я пытался выровнять контейнер по центру

Я знал, что в окне недостаточно места для div, что вызывает проблему в IE6 и 7, поэтому я использовал свойство Jquery css, чтобы определить ширину div с плавающим фоновым изображением.

<script type="text/javascript">
$(document).ready(function() {
    if($(document).width() > 1050){          //Container's width:1050px
        var wd = document.body.clientWidth;
        wd = Math.round((wd-1050)/2); 
        $("#bg2").css("width" , wd);
        $("#container").css("left" , wd);
    }
});
</script>

а хтмл...

<body style="background-color:#FFFFFF; margin: 0px; padding: 0px;">
<p align="right">
<div id="bg2" style="position:absolute; float:right; top:0px; right:0px; height:151px; margin:0px; padding:0px; font-size:1px; overflow:visible; background-image:url(images/back2.jpg);"></div>
<div id="container" style="position:absolute; top:0px; width:1050px; margin:0px; padding:0px; vertical-align:top; text-align:left;">
....(huge div container container)....
person Onur Kucukkece    schedule 27.12.2010