IE background spill

[Anax]

Hia,

I know I've read the answer to this but can't find it again.

Within my content box I have a graphical div to illustrate the heading.

.VillageShop, .Accommodation {display:block;
padding:0px;
margin:0px;
height:100px;
width:97%;
	text-align: center;
	overflow: hidden;
}
.VillageShop {
	background-image:url(../../../images/SiteImages/BarnBricks.gif);
}
.Accommodation {
	background-image:url(../../../images/SiteImages/BizCategories/Accommodation/landhorizon3.jpg);

}

For some reason in IE the background image overflows beyond the content box (which is floated, if that's relevant). And just as strangely it stops overflowing if you resize the browser window.

It works fine in Firefox.

My "display:block" is only there because I thought that might have been the weird answer to the problem.

You can see what I mean here
business directory on my site
same applies in the accommodation section.

As ever your help is much appreciated.:)

Russell

[FC Jamison]

I really can't see what you mean.

Did you fix it?

[Anax]

.VillageShop, .Accommodation, .Restaurants {
padding:0px;
margin:0px;
height:1%;
width:97%;


	text-align: center;
	overflow: hidden;
}
.VillageShop {
	background-image:url(../../../images/SiteImages/BarnBricks.gif);
}
.Accommodation {	background-image:url(../../../images/SiteImages/BizCategories/Accommodation/landhorizon3.jpg);

}

.Restaurants {
	background-image:url(../../../images/SiteImages/BizCategories/Restaurants/RestHorizonSheepBack2.gif);

}
.VillageShop img {height:75%;
padding-top:12px;

overflow: hidden;
padding-bottom:10px;
}


.Accommodation img.catPhoto{height:55%;
padding-top:7px;
padding-bottom:80px;
overflow: hidden;
}
.Restaurants img.catPhoto{height:51%;
padding-top:60px;
padding-bottom:5px;
overflow: hidden;
}

I tracked down answer which was the need to define {height:1% }.

This 1% becomes meaningless when the height of the box gets its new definition from the padded images I used, but for some reason it stops IE spilling the background.