How to solve css problem: blackground issue

Hi, I have very simple question but I cannot solve by myself.

I had modify a wordpress theme and here the result on Firefox:



And here the result for IE8:



The question: How can I get rid of the block blackground on IE8. Most of the visitor to my web use IE and even IE6.

Thanks in advance.

 

If you want us to help you, we'd need to actually see the html/css. A link to your page would suffice.

Otherwise, my only recommendation is to revert back to a state when the script was functional and then make 1 change at a time until you figure out what caused your problem.

 

Thanks

The theme name Gadget
and here the CSS:

#feature {
clear: both;
height: 240px;
width: 800px;
padding: 40px 70px 0 70px;
margin: 0 0 2em 0;
background: url(styles/silver-blue/bg-metal.jpg) center top no-repeat;
border: 1px solid #e0e0e0;
position: relative;
}

#feature-slides,
#feature .slide {
width: 800px !important;
height: 198px !important;
position: relative;
}

#feature .feature-content {
float: left;
width: 450px;
margin: 0 27px 0 0;
}

#feature .feature-img {
float: left;
}

#feature .feature-img a img {
border: 4px solid #393939;
}

#feature .feature-img a:hover img {
border: 4px solid #ccc;
}

#feature h2 {
font-size: 2.143em;
font-weight: bold;
letter-spacing: -1px;
margin: 0 0 .2em 0;
padding: .1em 0 0 0;
line-height: 1.1em;
}

#feature p {
font-size: 1.143em;
color: #393939;
line-height: 1.5em;
margin: 0 0 1em 0;
}
#feature-slides p.read-more {
position: absolute;
top: 168px;
left: 0;
background: url(../images/read-more-arrow.png) top left no-repeat

#ff7600;
background-position: 102px 10px;
}

 

We also need the HTML, otherwise we don't know how you coded and where it's going wrong. If you provided us with a direct link to the page, it would make things easier.

 

Thanks Here is the HTML. The link to the slide is not available because I did not upload the theme yet, just test it on my computer on Xampp

<div id="feature">
<!-- Feature area prev/next buttons -->
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="feature-slides" class="clearfix">

<?php
global $post;
$slidercat = get_option("gt_featured_category");
$slidercount = get_option("gt_featured_count");
$myposts = get_posts('category_name= '. $slidercat .'&showposts= '. $slidercount . '');
foreach($myposts as $post) : setup_postdata($post);
if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
}
?>
<div class="slide">

<div class="feature-content clearfix">

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php the_excerpt(''); ?>

<p class="read-more"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Read More</a></p>

</div><!-- END: .feature-content -->

<div class="feature-img">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
the_post_thumbnail();
} else { ?><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/no-image.jpg" width="315" height="190" alt="<?php the_title(); ?>" border="0" /></a><?php } ?>
</div><!-- END: .feature-img -->

</div><!-- END: .slide -->
<?php endforeach; ?>
</div><!-- END: #feature-slides -->
</div><!-- END: #feature -->

What I have done actually is this part: background: url(styles/silver-blue/bg-metal.jpg) center top no-repeat; from background: #f5f5f5;
The rest is untouched.

 

Some time there are few issues in background with different browsers. I would suggest you that you make two different CSS Class for different browser and run JavaScript to recognize the browser and Run CSS Class accordingly.

 

Try doing this:
background:transparent url(styles/silver-blue/bg-metal.jpg) no-repeat;
IE could possibly be covering up the image with a color and you don't need to define the position of the image using center and top.

Perhaps you could give us a live link so we can help debug this problem in IE.