Background height problem in FireFox but work in IE

[EthanCote]

Hello,

If this problem has already been addressed, please point me to the correct post(s) for solutions. Thanks.

I am trying to create my site using css and I ran into the problem with background not appearing in Firefox (FF) if height tag is not set but seems to show up fine in IE regardless of height tag set or not.

I am using this css to frame my other divs:

#project_management_frame {
background-image: url(images/interface/bg.gif) !important;
background-repeat: repeat;
background-color: #ffffff;
width: 960px;
height: 100%;
margin: 0px;
padding: 0px;
}

You will notice that I had to set the height property in order for the background to show up in Firefox ("height: 100%;"), however in IE, whether I set the height property or not, the background still appear and appear correctly without adding additional vertical spacing.

The problem with setting the height to 100% is that the height stretches vertically by giving me alot of vertical spaces in FF. And if I remove the height tag, the background image will not show up at all. I can not set the height to pixel size since the height will vary from pages to pages (since I will be using the same layout) and this will mean I will need to create different div for different pages and I do not wish to do that.

You can view this problem here:
http://www.vertabase.com/test/css_help.html

Link to my css:
http://www.vertabase.com/test/projec...t_software.css

How do you solve this problem? It is driving me mad. I have try to research this problem online but came up empty handed and I hope the users here can help me.

Thank you for your help.

Cheers,

Chi.

[zak]

From a quick glance at your CSS, it seems the problem is that since all the contents of #project_management_frame are floated (which takes them out of the normal flow of elements), #p_m_f doesnt know their heights, and doesnt extend down to contain them.

Luckily, you have an <img> at the bottom, which you can use to clear the contents and have the #p_m_f extend down dynamically.

So, in a nutshell, do this:

<IMG SRC="images/interface/border_bot.gif" WIDTH="960" HEIGHT="36" BORDER="0" style="display:block; clear:both;">

And see if that fixes it.

An extensive article on this clear fix can be found at http://www.positioniseverything.net/easyclearing.html

[EthanCote]

Thanks alot ZAK!!!!

You rock bud!!!

I deleted the height: 100%; and I moved the:

<IMG SRC="images/interface/border_bot.gif" WIDTH="960" HEIGHT="36" BORDER="0" style="display:block; clear:both;">

within the <DIV ID="project_management_frame"> tag and it worked perfectly!!!

This had me so stomped. I was pulling my hair out. lol

Thanks again!


Cheers,

Chi.

[zak]

anytime, glad it worked out