IE windows div align problem with sliced image

[turtle]

Hello. I am having an alignment problem with a page when viewed in IE on windows operating system. Here is the basic layout:

I have a container div which contains four divs each containing parts of an image which is sliced into four pieces. When viewed in IE windows, a line break is appearing between the divs, which prevents the sliced image from aligning properly.

Here's a simplified code sample:

<div>(container)

<div1>(contains top slice of image)

<div2>(contains left slice of image)

<div3>(contains right slice of image)

<div4>(contains bottom slice of image)

</div>

here's the stye declarations:

.blackboxtop {

width: 722px;
float: left;
margin: 0px

}

.blackboxleft {

width: 10px;
float: left;
margin: 0px

}

.blackboxright {

width: 10px;
float: right;
margin: 0px

}

.blackboxbottom {

width: 722px;
float: left;
margin: 0px

}

A line break appears after the top slice and before the bottom slice.

Any ideas on how to fix this?

[mipapage]

Perhaps the three pixel text jog [webmasterworld.com]?

Incidentally, you may be able to reduce that by one container if you place one of the images in the biggest container.

[grahamstewart]

Are you saving much file size by slicing this image?
If not then why bother?

[turtle]

Could anybody briefly explain how to fix the "3px text jog" in the context of this example? I read the article on "Position is everything" and found it somewhat confusing.

Thanks for the help.

[turtle]

I am using the image to display a box with rounded borders, the image is too large not to slice into pieces.

[turtle]

I tried the fix mentioned in the "Position is Everything" article (adding 1% height to element following the float), this did not work.

.blackboxtop {

width: 722px;
float: left;
margin: 0px;

}

.blackboxleft {

width: 10px;
height: 1%;
float: left;
margin: 0px;

}