Background image not showing?

HTML & CSS
1

Hello everyone,

If anyone can help me I will be infinitely grateful. This pertains to this site:

http://cleanitvalet.com/test/index.html

The problem is: within the <body> I have a <div id=“page_content”> whose sole purpose is to have as a background a .jpg which fades to white towards the bottom. However, in the beginning I specified a height of exactlly the .jpg size for the #page_content div. This rendered page correctly in IE8 and Firefox, but IE7 was thinking that the content stopped after height: 250px and the footer was showing up right in the middle of the page. So… I took out the height part to accommodate IE7 and it looked good in IE 7 with footer correctly at the bottom. The problem is that the newer browsers (IE8 and Firefox) cut off the flag background image for page_content when there is no height attribute for the .jpg.

Someone please help! Please check the #page_content section in my .css file and in the index.html as well. I don’t get why this is happening.

2

Hi, the problem is is that the #page_content has floated contents and as such the parent is collapsing.

You have tried to prevent this by using a clearing div in the HTML called “clear_it” right after #page_content div starts. Well the clearing element has to be right before the element CLOSES not right after it STARTS :).

However, I’ll make it simpler for you, remove the .clear_it element in the HTML and just add overflow:hidden; to #page_content :slight_smile:

3

yes… RyanReese you are a man amongst men… however, now to try and make it look good in IE6… should I even bother trying to make it look good in IE6?

4

Of course you should :). It’s still a widely used browser (unfortunately)

The link you posted in your first post is now a 404?

5

oh sorry… it is here now since it looks decent enough (at least IMO… lol)…

http://stevekimforag.com/

6

anyway, any tips concerning IE6? it looks pretty massacred in IE6

7

For one thing, #page_content needs a width/haslayout set :slight_smile:

#page_content{width:875px;}
#abc_seven{display:inline;}
.clear_it{height:0;font-size:0;}
#je_quote{width:253px;}
#nav a{width:auto;}

Then, the #abc_seven is falling to the double float margin bug (read more here
The .clear_it is being expanded (small issue). Font size and height set to 0 will make it small.

The #je_quote was a bug, you set titalics and IE was thinking it was bigger then it is… Info here. The easieset fix was just setting the width of hte div

And the #nav a had a width set, but totally that was a bigger width then the parent and thus IE expanded it thus it contributed to the right div drop

Add in the CSS I posted above and all should be fixed.

8

dude… i feel like i have to make a donation to you in paypal! well, i do read mostlly sitepoint books so maybe that is payment enough lol… thanks so much i’ll do a bit of that tonight and post again when it is done… however, right now I am trying to add a gallery section to the site…

9

You wouldn’t be the first lol. I acutally got a $100 donation via paypal last week for helping this guy on here. I used it to buy an Ed Reed jersey (Ravens NFL team). I told him it wasn’t needed but he insisted. He is also getting me a free laptop from this guy at google :smiley: :smiley: :smiley: :D.

I made an edit or two to my explanation if you want to reread :).