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.

[BGarner]

I don't see the problem. Both show up beautifully for me.

Try inserting...

Code: Select all

html, body {
height: 100%;
}

...or...

Code: Select all

   #project_management_frame {
     background: #fff url(images/interface/bg.gif) repeat-y;
     width: 960px;
     height: 101%;
     margin: 0; 
     padding: 0;
 }

[BGarner]

You shouldn't need a height attribute though.

[EthanCote]

Hi BGarner,

The following code was already implemented:

html, body {
height: 100%;
}

And I have also removed the height tag but when I removed it, in FF, the background does not show up at all.

I tried implementing your code:
#project_management_frame {
background: #fff url(images/interface/bg.gif) repeat-y;
width: 960px;
height: 101%;
margin: 0;
padding: 0;
}
And that didn't change anything. I still have the same problem.

I understand my css isn't very clean. I am in the process of learning to use tableless tags so my css is a work in progress.

Do you or anyone else here have another solution to fixing the problem?

When you view the site in FF (http://www.vertabase.com/test/css_help.html) do you see the extra vertical space I'm referring to?


Thanks all for any help.


cheers,

Chi.

[EthanCote]

I am using FF version 1.5.0.10, what version of FF are you using?

I am using IE version 6.

Thanks.


Cheers,

Chi.

[EthanCote]

Hi,

Just to update everyone. I was able to solve the problem by adding "style="display:block; clear:both;" to my image.

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

I also move that image within the <div> of <DIV ID="project_management_frame">

Apparently someone from another forum was able to help me. He show me this link:
http://www.positioniseverything.net/easyclearing.html

Thanks again.


Cheers,

Chi.

[Ryan Fait]

You don't need display: block; in there. Clear will do fine by itself.