Member Avatar for 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

  • 2 Contributors
  • 2 Replies
  • 104 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Anax
Member Avatar for FC Jamison

I really can't see what you mean.

Did you fix it?

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.