IE background spill

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 397,784 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,397 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1093 | Replies: 2

•

Join Date: Mar 2006

Posts: 24

Reputation: Anax is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

Anax

Offline

Newbie Poster

IE background spill

Oct 5th, 2006

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.

Help with Code Tags

(Toggle Plain Text)

.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

•

Join Date: Jun 2004

Location: Hemet, CA

Posts: 427

Reputation: FC Jamison is on a distinguished road

Rep Power: 5

Solved Threads: 17

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: IE background spill

Oct 7th, 2006

I really can't see what you mean.

Did you fix it?

•

Join Date: Mar 2006

Posts: 24

Reputation: Anax is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

Anax

Offline

Newbie Poster

Re: IE background spill

Oct 8th, 2006

Help with Code Tags

(Toggle Plain Text)

.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.