Question

I put a jQuery slider in my page, and when I add a new div underneath it and add float: left the gradient stops right there. Here’s the LINK.

And when I don’t add float: left the gradient background is normal :s…

CSS:

body {
    height: 100%;
    border-top: 1px solid white;
    margin:0;
    background-repeat: no-repeat;
    font-family: 'AandachtBold';
    -webkit-font-smoothing: antialiased;
    background: #cdd6de;!important;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f4f5f5), to(#cdd6de));fixed !important;
    background: -moz-linear-gradient(#f4f5f5, #cdd6de);fixed !important;
    background: linear-gradient(#f4f5f5, #cdd6de);fixed !important;
    -pie-background: linear-gradient(#f4f5f5, #cdd6de);fixed !important;
    behavior: url(/PIE.htc);
}

JavaScript:

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script src="js/jquery.easing.1.2.js"></script>
<script src="js/smooth-src-comments.js"></script>
<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 3500,
            pause: 2500,
            hoverPause: true
        });
    });
</script>

Answer 1

Your css code seems to be invalid.

For example

  background: #cdd6de;!important;

This should be like so

  background: #cdd6de !important;

Also I have never seen “fixed” used on a gradient before, this could be causing a problem

  background: -moz-linear-gradient(#f4f5f5, #cdd6de);fixed !important;

---

Try using my code below with your colors, this code works in Internet Explorer too;

  background: #0A284B;
  background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
  background: -moz-linear-gradient(top, #0A284B, #135887);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
  zoom:1;