Tables inside a div? IE7 compatability issue - looking for a resource to expand knowledge on how to deal with IE7 problems - html

Question

I'm currently doing the redesign for this site: http://www.palosverdes.com/rpv2012/ and have run into a problem with repeating a gradient inside a div (cnews). The issue is that when the gradient is repeated on IE7, there is a color problem. It almost seems as if the blue on the image is lightened somehow. When I set the attribute to no-repeat, I don't get the rounded edges effect I'd like the achieve.
Here's the code in question:
<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 & 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-->
and the relevant 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 */}
What solution can I pursue that will allow this to still render correctly in modern browsers as well? Should I use IE7-specific CSS?
Also, where can I look to see what HTML/CSS ie7 has problems interpreting compared to modern browsers?

Answer 1

Your width:50% on your stopmarquee is causing that item to drop down lower in IE7, instead of rising up next to the right floated spotlight div. This is causing your cnews container to expand down further, which is then causing your background image to repeat in the 'y' direction (like 3rror404 stated in his comment).
Your background image itself has a color shift within it, so that the top of the image is lighter than the lower part of the image, thus you are getting a lighter look when the image repeats in the 'y' direction.
You can correct the stopmarquee position by changing to width: 49% (which I don't think will hurt your layout), and that will probably resolve your issue. Otherwise, make the background image a solid color so that a repeat does not cause the issue.