Display a 100% height background image in FireFox?

Hi all,

I am having problems with the display of a background image and the height.

Part of my css

#container {
	background-image:url(/imgs/bgShadow1.png);
	background-repeat:repeat-y;
	*height:auto !important;
	margin:auto;
	min-height:600px;
	padding-left:10px;
	text-align:left;
	width:780px;
}
html>body #container { 
	background-image:url(/imgs/bgShadow1.png);
	background-repeat:repeat-y;
}
#content {
	background-color:#FFFFFF;
	/*height: 100%;*/
	width: 770px;
}

Code (markup):

It works in IE but firefox uses the min-height as a maximum. The background image doesn't repeat to the #footer

Any suggestions?

 

Hi,

Add the following style:

html,body{height:100%}

and replace the following line:

*height:auto !important;

with:

height:100%;

This will do the trick. Tested in FF2, IE6 and Opera9

 

tx for thinking along

but, still no luck

see onkruidbeurs.nl/index2.php in FF.

any other suggestions???

 

It is a float and clear issue. The container is not getting stretched because of the float of the child divs. I'll try to pin-point the problem in a while.

 

ok, this will solve your problem...

Add the following line just before closing the container div:
<div style="clear: both;"></div>

And remove the height:100% rule from container

 

@manishk, Awesome that did the trick.

again a valuable lesson thx

 

<div style="clear:both;"></div> is a dirty solution IMO. Looks like you're setting hasLayout for IE so IE will contain floats, just set overflow to hidden on the container and it will contain floats.

 

Yes, overflow:hidden is a better solution. Thnx for the tip.

 

soulscratch: what would be the best way to clear this if there is no wrapper/container div:

CSS:

#d1,#d2{float:left;width:100px;height:100px;background:red}
#d2{float:right;background:pink}

Code (markup):

HTML:

<div id="d1">D1</div>
<div id="d2">D2</div>
<div>Some other div</div>

Code (markup):

 

Both are fixed height, don't bother with a float.

#d1,
#d2 {
	width:100px;
	height:100px;
	background:red;
}

#d2 {
	margin:-100px 0 0 100px;
	position:relative; /* just in case depth sorting is an issue */
	background:pink
}

Code (markup):

Since they are both block if they don't float, no need to clear. You just use a negative margin to slide it up into position.

Mind you, this only works because you fixed the heights.

 

If the height is not fixed or I have to use float for some reason then how to clear without any extra markup? Is it possible?

 

Thank you for the solution, I was having the same problem with a background image and this fixed it.

 

Note: parent elements are NEVER to expand to contain floated elements. This is a bug in IE. Firefox was performing correctly.

 

Wow, some fun necro. DrHowardDrFine is correct in pointing out that IE's behavior is wrong, even if it's the one we desire 99.99% of the time we use a container around DIV.

As to clearing without extra markup, not REALLY possible without using CSS3 - and since CSS3 is undeployable 'real world' and looks to be that way for about five years...

The best way to handle that is to wrap your two elements in a wrapping DIV, and set that div to have overflow:hidden; and a non-dimension haslayout trigger... assuming you are using a valid doctype (who isn't nowadays?)

 

I agree but I've learned the real issue is people using float when they should really be using positioning.

I'll alert my staff to stop what they've been doing for the last year.

It is amazing what we find on forums still today, isn't it?

 

You've been using CSS3? Lucky everyone is using a browser that supports it fully! Oh, wait...

 

You have to be careful on what you use and allow for progressive enhancement. Gecko and Webkit users will see a lot of enhancement IE users miss out on. Sometimes you can only use the CSS3 available only as vendor extensions but they're the same thing.

People forget that standards are based on implementation not invention. Everything in the CSS3 documents was working, in some form, in at least one browser. Everything we use works in Gecko and Webkit and usually Opera, too.

Think of this: CSS2.1 only became a recommendation about two years ago. Did no one use CSS till then?

 

Big night last night haha. Bits and pieces work, the main problem is the compatibility, corners are smalltime, I want to use multiple background images and things like that - makes the HTML more semantic and will simplify coding... One day. Wish ie would just use webkit that'd speed things up, that'd be admitting even after decades of browsers they still suck though, so I doubt it

 

They already announced IE9 and, yes, it sucks. Microsoft is bragging about the new features it will have. Features that all the other browsers had years ago. It still won't handle XHTML, SVG, or the canvas tag. At least not that they said so. But you would think that, if it did, they would talk it up since every modern browser already does.

 

Have you seen their coverage? It's ALMOST as good as the other browsers speed wise! On the chart it looks a bit slower than Firefox, and double/triple slower than webkit. Personally if I was advertising it, I wouldn't show a chart with IE9 still getting slaughtered by the competition, no matter how good it looks against previous versions (which I wouldn't be trying to focus on either). It's a good step up from 7 & 8, but it's really what 7 & 8 should have been from the start... at least they're churning out versions quickly, hopefully v10 will pretty much on par with the others. They're spending too much time on "frills" and not enough time fixing up the core underlying problems.

Not even getting started that I will soon have FOUR versions of the same god damn browser to test sites in, it's getting a bit ridiculous.

It's a step in the right direction (finally), just still not good enough IMO.



http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

So true. They did a good job turning the rubbish that was Vista into Windows 7, it's got its flaws like any OS but its nice to use, looks good, and is a lot more reliable. Hopefully they can admit IE is an absolutely failure (just like they basically did with Vista) and really focus on making a good next version.