A complex problem - XHTML,CSS

programming web dev
1

Hi,

I have a main image for the header part of the page. But this image has different colors on its left and right sides. So I need to use 2 background images instead of 1.

(For a better understanding you can check this picture
www.abus.terzzi.com/sample.jpg
)

So I made 2 divs for the 2 different background,

<div id=“backgroundLeft” ></div>
<div id=“backgroundRight” ></div>



#backgroundRight {
    position:fixed;
    z-index:1;
    width:49.9%;
    height:315px;
    float:right;
    margin-left:50%;
    background-position:left top;
    background-repeat:repeat-x;
    background-image:('bgRight.jpg')
}

#backgroundLeft {
    position:fixed;
    z-index:1;
    width:50%;
    height:315px;
    float:left;
    background-position:right top;
    background-repeat:repeat-x;
    background-image:('bgLeft.jpg')
}

And 1 div for the main image



#mainPicture {
    position:absolute;
    z-index:5;
    width:100%;
    text-align:center
}

This structure looks good on FireFox but it goes bad at IE 6.0
you can check it at: www.abus.terzzi.com .

My questions are can you suggest a better structure and how can I make this work on IE6.

This is a very urgent issue, I hope you can help.

Best Regards