Hi, I have a problem I'm going mad with. I've designed my first CSS fluid design which looks great in Firefox and pants in IE. The tiling images do not appear in IE but everything else is in place. I took out the wrapper and it seems to have made no difference. What do I need to do to get tiled images to appear in IE when using pure CSS and no tables. Help!

Thanks Linds, sorry the site is not live....

body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;

}

#leftTop {
background-image: url(../images/leftTop.gif);
background-repeat: no-repeat;
width: 355px;
left: 0px;
top: 0px;
height: 73px;
position: absolute;


}

#tileTop {
background-image: url(../images/tileTop.gif);
background-repeat: repeat-x;
height: 73px;
left: 355px;
right: 272px;
top: 0px;
position: static;







}

#rightTop {
background-image: url(../images/rightTop.gif);
background-repeat: no-repeat;
height: 73px;
width: 272px;
position: absolute;
top: 0px;
right: 0px;

}

#searchTxt {
background-image: url(../images/searchTxt.gif);
background-repeat: no-repeat;
height: 13px;
width: 61px;
position: absolute;
left: 2px;
top: 34px;





}

#searchBox {
background-image: url(../images/searchBox.gif);
background-repeat: no-repeat;
height: 34px;
width: 110px;
position: absolute;
background-position: center;
top: 26px;
left: 62px;


}

#searchButton {
background-image: url(../images/searchButton.gif);
background-repeat: no-repeat;
height: 35px;
width: 34px;
position: absolute;
left: 174px;
top: 22px;


}


#leftSide {
background-image: url(../images/leftSide.gif);
background-repeat: no-repeat;
height: 318px;
width: 92px;
position: absolute;
left: 0px;
top: 72px;





}

#leftSideTile {
padding: 0;
background-image: url(../images/leftSideTile.gif);
background-repeat: repeat-y;
position: absolute;
top: 390px;
bottom: 54px;
width: 98px;
left: 0px;
}

#leftBottCorner {
background-image: url(../images/leftBottomCorner.gif);
background-repeat: no-repeat;
height: 54px;
width: 114px;
position: absolute;
left: 0px;
bottom: 0px;

}

#rightSide {
height: 315px;
width: 81px;
position: absolute;
background-image: url(../images/rightSide.gif);
background-repeat: no-repeat;
right: 0px;
top: 73px;


}

#rightSideTile {
background-image: url(../images/rightSideTile.gif);
background-repeat: repeat-y;
width: 81px;
right: 0px;
top: 387px;
position: absolute;
bottom: 55px;
















}

#rightBottCorner {
background-image: url(../images/rightBottomCorner.gif);
background-repeat: no-repeat;
position: absolute;
right: 0px;
bottom: 0px;
height: 55px;
width: 102px;


}

#bottomTile {
background-image: url(../images/bottomTile.gif);
background-repeat: repeat-x;
height: 33px;
position: absolute;
left: 114px;
right: 102px;
bottom: 0px;



}

I think the problem might be with your absolute positioning. It's either left or right, top or bottom. Not both. IE should be fine though with the repeat-x or the repeat-y. However if you just set the width and height on the div (to match either the width or height of the image) you won't need to specify x or y since the default will just be to fill the div. I know I've sometimes had an issue with using repeat-x or repeat-y, but can't remember at the moment what the issue was of how I fixed it.

If fixing the positioning doesn't work could you also post the html and maybe attach one of the tile images?

Hi, many thanks for the advice...I had a thought it might be absolute...anyway what's really weird is that I've just put it online http://www.reded.net/index.php?optio...d=25&Itemid=44
and it appears to be working...huh? I wonder if it was my local browser causing probs..see what you think. I'm going to check it on other browsers now.

Many thanks (obv no content yet...just the bare bones!)

Linds

You're going to have problems by absolutely positioning EVERYTHING. It causes problems and it simply is not necessary.

Hi as I'm fairly new to fluid CSS, what's the best way to go about it withouth absolutely positioning it to the body tag. I put a wrapper in and then out and it made no difference whatsoever. Should I just float left/right etc but then how do I make all the images line up exactly?

Thanks, Linds

There's probably several ways to set it up. My first though would be to set the background color of the entire body to the light blue color. Then I would create a couple of divs that had a width of 100% and give the first one a margin-top. That first div would have two images for the musical notes. The first image in the code I would float right and then second one I would float left.

The next div should automatically sit right below the div with the musical notes. That div I would also give a width of 100% and whatever height you want and simply fill it with a background color of the darker blue.

After that I would create the content divs. I would probably wrap all of the content divs in one wrapper div that I would center and add some relative positioning and a z-index so it sits on top of the two divs just created for the background.

That would be my first though as to a basic approach. It might still need tweaking. I'd have to try things to really know.

Hope that helps.