make background images on divs show up in Firefox

gilahacker · 02.03.2005, 11:21

I'm starting a new mambo based website (this is my 2nd mambo site) and I used the tutorial from allmambo.com to do the template and it looks fine in Internet Explorer, but the background images on my div's aren't showing up in Firefox, I just get empty boxes.

it should display one "main" div that's 100% wide, 100px high, with a repeating background image. Inside this div are two other divs (both floated left) with their own background images (both also 100px high).

Works in IE, Firefox gives me a 100% x 100px empty box. I tried the css in the html, then seperated it. Tried taking off the floats, tried floating the parent div, nothing, nada, zip, zilch, zero change. Always works in IE, never in Firefox.

the demo site from the allmambo.com tutorial has the same problem: http://demo.allmambo.com/index.php?m...te=my_template

they're using tables, I'm using divs but we've both got the same problem.

ok, I'm gonna have to post the code so it makes sense:

html:

Code:

<div class="topsection">
	<div class="topleft"></div>
	<div class="toplogo"></div>
</div>

css:

Code:

.topsection
{
 width:100%;
 height:100px;
 background: url(/templates/articleblast!/images/top.png) repeat-x;
}

.topleft
{
 width:150px;
 height:100px;
 background-image:url(/templates/articleblast!/images/top_left.png);
 float:left;
}

.toplogo
{
 width:362px;
 height:100px;
 background-image:url(/templates/articleblast!/images/logo.png);
 float:left;
}

Thanks in advance for any suggestions/advice!

-Jason
www.gilahacker.com (currently under development)

gilahacker · 02.03.2005, 22:43

NEVERMIND...

I have the Firefox "web developer" toolbar installed and somehow had "Page Colors" disabled.

Re-enabled it, and voila! It works like it should.

Geez I feel stupid now.

:-P

-Jason
www.gilahacker.com

trooper · 22.03.2005, 18:31

i double checked averything in Firefox and IE and in CSS code, even copied your own code as listed here and made a test page...

NOT WORKING FOR ME !

i just can't insert a background image in my template and even in a simple HTML file.

Do i have to change something in the <HEAD> code for transitional to something different ?

I see a ton of websites explaining how to put a bg image in a DIV , i even have a very very good book (CSS ref. guide, latest ed. ) and i copied the coding and not working... man i am desperate...

can someone help me plz?

test page... simple but for testing
http://www.go-dezign.com/atv/toto.htm

thanks for your help

gilahacker · 22.03.2005, 23:49

ok, your first image (defined by css in the html file) works for me in IE but not firefox, your second image (defined in the external css file) doesn't work in either.

lets try something...

add "font-weight:bold" to your list of properties in the external css file... this will tell us if the css file is being loaded correctly. (if the font for the second line shows up bold then it's working...)

put a slash "/" in front of your url (not "../", just "/") for your first line (in the internal css), this might fix the first one for firefox...

remove the ".." at the beginning of your url for the second line (in the external css file) just for kicks... see what happens...

if all else fails, try absolute paths to your images. I.E. http://www.go-dezign.com/atv/images/main_navfill.png

I have a feeling that the ".." is killing the background for the second line because it's trying to look a level too high, even though the css file is in a lower directory, the parent html file calling it is not and I'm thinking that the path is relative to the location of the parent file.

Note: I could be wrong, but this is my best guess right now...

-Jason
www.gilahacker.com (under MAJOR construction)