I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the image is somehow lightened. And setting the attribute to no-repeat eliminates the rounded edges effect that I am aiming for.
Below is the code snippet causing the issue:
<div class="box-noshadow" id="cnews">
<div id="spotlight">
</div><!--spotlight-->
<!-- More HTML code here -->
As for 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;}
<!-- More CSS code here -->
I am seeking a solution that allows proper rendering in modern browsers while addressing the issues observed on IE7. Should I consider using IE7-specific CSS?
Additionally, where can I find information on HTML/CSS elements that IE7 struggles to interpret compared to more recent browsers?