Таблицы внутри div? Проблема совместимости IE7 - поиск ресурса для расширения знаний о том, как решать проблемы IE7

Question

В настоящее время я делаю редизайн для этого сайта: http://www.palosverdes.com/rpv2012/ и столкнулся с проблемой повторения градиента внутри div (cnews). Проблема в том, что когда градиент повторяется в IE7, возникает проблема с цветом. Почти кажется, что синий цвет на изображении как-то светлее. Когда я устанавливаю атрибут no-repeat, я не получаю эффект закругленных краев, который я хотел бы достичь.

Вот код, о котором идет речь:

<div class="box-noshadow" id="cnews">
<div id="spotlight">
</div><!--spotlight-->
<div onmouseout="document.getElementById('stop').start();" onmouseover="document.getElementById('stop').stop();" id="stopmarquee">
<div align="center" id="toptitle">
CITY NEWS &amp; EVENTS
</div><!--toptitle-->
<div id="cnewscontainer">
<iframe align="middle" width="400px" scrolling="no" height="100px" frameborder="0" src="scroll_file_b/break2.cfm"></iframe>
</div><!--cnewscontainer-->
</div><!--stopmarquee-->
</div><!--cnews-->

и соответствующий CSS:

#cnews {
width: 100%;
background-image:url(images/cnews-back.jpg);
float: left;
padding: 5px;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;}

#spotlight {
width: 50%;
height: 200px;
background-color: yellow;
float: right;
padding: 5px;}

.box {-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */}

Какое решение я могу использовать, чтобы оно также корректно отображалось в современных браузерах? Должен ли я использовать IE7-специфичный CSS?

Кроме того, где можно посмотреть, какие HTML / CSS ie7 имеют проблемы с интерпретацией по сравнению с современными браузерами?

Answer 1

Ваш width:50% на вашем stopmarquee заставляет этот элемент опускаться ниже в IE7, вместо того, чтобы подниматься вверх справа от всплывающего spotlight div. Это приводит к тому, что ваш контейнер cnews расширяется вниз, что приводит к тому, что фоновое изображение повторяется в направлении 'y' (как 3rror404 в своем комментарии).

Ваше фоновое изображение само по себе имеет цветовой сдвиг, поэтому верхняя часть изображения светлее нижней части изображения, поэтому вы получаете более светлый вид, когда изображение повторяется в направлении 'y'.

Вы можете исправить положение stopmarquee, выбрав width: 49% (что, я думаю, не повредит вашему макету), и это, вероятно, решит вашу проблему. В противном случае сделайте фоновое изображение сплошным цветом, чтобы повторение не вызывало проблему.