0

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

2
Contributors
2
Replies
3
Views
10 Years
Discussion Span
Last Post by Anax
0
.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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.