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

same applies in the accommodation section.

As ever your help is much appreciated.:)

Russell

  • 2 Contributors
  • 2 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Anax

Dani AI

Generated

already hit the nail on the head: giving the container a tiny height (your height:1% hack) stops the background “spilling” in Internet Explorer because it forces the element to acquire IE’s proprietary "hasLayout" behavior. That also explains why resizing the window fixes it temporarily — a resize triggers a reflow/repaint in IE and hides the rendering glitch. ’s inability to reproduce is consistent with that intermittent repaint behavior.

A cleaner, less brittle fix is to trigger layout explicitly for old IE (rather than relying on a meaningless percentage height) and to avoid percentage heights on images unless the parent has an explicit height. Use zoom:1 or position:relative (or give a real min-height) to establish layout. Also make images display:block and use max-height/height:auto or explicit pixel sizes so their padding or percent sizing does not change the container height unexpectedly.

Example CSS (non-destructive replacement for the height:1% trick):

.VillageShop, .Accommodation {
  width: 97%;
  text-align: center;
  overflow: hidden;   /* keep clipping */
  zoom: 1;            /* IE6/7: gives hasLayout without odd height hacks */
  position: relative; /* helps rendering consistency */
}

.VillageShop img, .Accommodation img {
  display: block;
  margin: 0 auto;
  max-height: 100px;  /* prefer px or max-height + height:auto over % heights */
  height: auto;
}

Notes: zoom is nonstandard but harmless in modern browsers and is the usual, safe way to fix old-IE layout bugs. If supporting only modern browsers you can drop the hack entirely. If legacy-IE support is required, place zoom:1 in an IE-only stylesheet or conditional comment so the rule stays explicit and intentional.

Recommended Answers

All 2 Replies

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.