Gradient Background Alignment Problem (Firefox/IE Issue)

[Nick]

Howdy,

I'm not an expert at css but I use it from time to time. Recently, I wanted to have a gradient style background. Basically, I made the background color a dark red colour and made a gradient image repeat across which gave it the "gradient" look.However, IE and Firefox totally mess up the alignment - I can make it look good in one browser but not the other! I don't undestand what they're doing differently. All I've noticed is that they don't display it properly and that Firefox has a scroll bar for some reasoon (my website isn't long!). Do you guys know what the problem is or any possibly fixes/alternatives? Many thanks.

Screenshot:
http://nick.thedvn.com/images/css.png

CSS:



html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;


background-image:url("Sliced Back/images/background.png");
background-repeat: repeat-x;
background-color: #7d0504;

}


I also have a header (the black thing on top) on the site with this code:



<div id="header"> <img src="Sliced%20Back/images/site_01.gif" align="left" border="0"> <A HREF="mailto:x@x.com"><img src="Sliced%20Back/images/site_05.gif" align="right" border="0"></A> <img src="Sliced%20Back/images/site_08.gif" align="right" border="0">
</div>


Thanks again.

[mlk]

I don't know for sure, but IE handles PNGs like crâp...

[λ]

If the absolute worst came to the worst, you could always use a server side language together with the User-Agent HTTP header to serve different CSS to different browsers..

[Nick]

Thanks for the tips guys. You don't know how helpful your comments are. As mlk said, IE handles .pngs like crap. I had to replace my .png with a .jpg and it works like a charm now. The background is not as smooth as with the .png but it still looks good - it's kinda like http://macromedia.com/ in terms of smoothness. Thanks again!