September 6, 2008 10:19am pdt

Member Login

Hall of Fame

Yearly

1hielo 521,265
2Kravimir 503,037
3Steggs 282,630
4scrathcyboy 162,810
5VirusMinus 133,597
6TName 94,985
7GreenGho... 94,541
8mreuring 81,005
9zemond 78,137
10bluefezteam 75,832
11glumlun 73,615
12mplungjan 69,992
13jason1178 68,415
14Rouchie 57,060
15Lolly-Ink 54,932
16b0lsc0tt 51,054
17Eternal_S... 49,432
18nexusnation 46,650
19strobbe 40,200
20ali_kayahan 39,930
21zkeown 39,775
22xberry 39,375
23Ray_Pas... 39,310
24logicalins... 37,925
25glcummins 37,545

	[x] Attachment Details

Div background image disappears in Mozilla, not IE

Zone: Cascading Style Sheets (CSS)

Tags: background, div, image

In my first stab at a CSS-based site, I've been able to solve most of my problems with a little google action, but this problem's not coming up for me.

I have a fixed-width page, and I'm centering the main div for larger resolutions. I have a background image that I want to be behind the fixed width portion. That image fades to almost black at the bottom, so I set the page background to that "almost black" color such that it seems to blend seamlessly on down for longer pages.

Right now I have everything inside a div with a background image. Initially the background image wasn't showing through, but I found a site that said that was because that div only had more divs in it, no content. So I stuck in a transparent gif, and suddenly it worked in IE:

<div id="bigbox" style="background: url(images/grad2.jpg) top no-repeat; height=100%; color: transparent" > <img src="damnfoolery.gif" height="600" width="1">

But in Firefox and in Netscape 6.2, the background image apparently chooses randomly from among these three:
1. Not show up
2. Show up for an instant and then disappear
3. Show up, but disappear if I resize, or if I minimize the browser and restore it.

You can see what I mean at http://home.stny.rr.com/prats/testsite/

A little trick to clean up my code would be great, but if I have to redo my whole kludgy concept, that advice would be useful as well.

Start your free trial to view this solution

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

6.8

Question Stats

Zone: Web Development

Question Asked By: AntonioP

Solution Provided By: Daydreams

Participating Experts: 4

Solution Grade: A

Translate:

Loading Advertisement...

20080723-EE-VQP-34