Background not showing in IE but does in Firefox

[arthuc01]

Hi guys

I really don't know why this ain't working ...

http://chris.lineages.co.uk/purenuke/cja1.htm
http://chris.lineages.co.uk/purenuke/style.css

Basically I want to apply the same background to the h2 in the center column as is applied in the h3 in the flanking columns. In Firefox this works fine whereas in IE it dies - but strangely, it renders the font size change and box padding margin as it supposed to it just doesn't "see" the background ????

Any help much appreciated

Chris

[Paul O'B]

Hi,

Try the 1% height hack.

#maincontent h2{
 font-size: 1em;
 background:red url(http://chris.lineages.co.uk/purenuke...tyle/h3_bg.gif) repeat-x bottom left;
 margin:0;
 padding:3px 5px 20px 5px;
}
* html #maincontent h2{height:1%}

That should force it to display.

Paul

[arthuc01]

Cheers for that Paul It workled a treat. I've never seen the hack before whats it for/what does it do? and why's it needed here?

[Paul O'B]

Hi,

IE has a bug that varies slightly but often has the effect of hiding elements. It can hide whole floats or images and seems to overwrite content with the background of the parent.

The bug is usually evident in children of positioned elements and the usual solution is to add position:relative to the child also and this usually cures it.

The other cure is to use the height:1% hack which fixes similar bugs and you just have to try both out to see which one is needed as there are always slight variations but the problem is always solvable with either one or the other techniques.

IE doesn't like it when elements have no specified width or height and adding a height:1% obviously gives ie something it can work with. As ie treats height as min-height the 1% has no detrimental effect to the layout because it will just increase the height to accomodate the content, unlike other browsers which will stay at the specified height.

Which is why the star selector (* html) hack is used to give style only to ie. (http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html )

In your cass above you could also just have removed the position:relative from maincontent instead and the background would have re-appeared.

#maincontent {
float:left;
width:317px; 
margin: 0;
padding:5px 5px 5px 5px; text-align:justify;
}

However I assumed that you needed the position:relative for stacking context or positioning context so the height:1% hack would seem to be more suitable.

Hope that explains it a bit

paul

[arthuc01]

Cheers for that mate - it all becomes clear :-)

[Paul O'B]

I suppose I should point out that ie5mac doesn't like the height:1% hack and for the sake of completeness you should hide it from mac.

/* Hides from IE-mac \*/
* html #maincontent h2 {height: 1%;}
/* End hide from IE-mac */

Paul