Disappearing Background Images (IE6)

kidreapertronV · May 31st, 2007, 05:20 PM

Hi everybody!

I'm nearly finished designing a site at http://www.sugarmaplemedia.com/

That's the testing address.

I've got a problem when I view this in IE6. The background for the box with the gradient appears on the home page, but my other backgrounds disappear on every other page.

The css code is rather extensive, so I've posted it here: http://www.sugarmaplemedia.com/css.html

When I put the original image from the homepage on a different page, it doesn't disappear, so my notion is that I've done something differently with the other images or the rules surrounding them, I just can't see what!

I've tried adding position: relative; but no luck.

Any suggestions?

Lchad · May 31st, 2007, 07:51 PM

First thing I would do is fix the few errors you have in validation. One of them might be the source of your headache!

notagz1 · May 31st, 2007, 08:24 PM

Quote:

Originally Posted by Lchad

First thing I would do is fix the few errors you have in validation. One of them might be the source of your headache!

I had a look at your site and found a few errors.

http://validator.w3.org/check?uri=ht...Fproducts.html

Please follow the link, and correct them, and your site will be fixed..

Thanks

<notagz1>

kidreapertronV · June 1st, 2007, 10:42 AM

I validated my page and there is still a problem with my javascript hack for png transparency, but I can't find a way around that to validate it properly. But even when I remove that hack, so it validates properly, it doesn't make the background image appear.

Any suggestions?

I've tried the hacks on the bg images, where you apply height, or position:relative, and neither have worked.

Sigh. Any help would be greatly appreciated. Thanks!

kidreapertronV · June 1st, 2007, 10:52 AM

and thanks for the suggestions for validation! i can't believe I forgot to run the pages! it's been one of those weeks.... : )

kidreapertronV · June 1st, 2007, 11:14 AM

Ok folks. I figured out the problem. IE6 for some reason, doesn't like pulling a background image from a class. Originally, I had:

#box_links { position: absolute; z-index: 7; top: 146px; left: 70px; width: 857px; height: 398px; border: 1px solid #BEC2D8; }
#box_links.brun { background: url(../images/box_bg_brun.jpg) no-repeat; }

Every browser but IE6 recognized this. So, I had to create a separate div to replace each of the 13 classes I'd originally had, which padded the CSS code like crazy, but it works now.

#box_links_brun { position: absolute; z-index: 7; top: 146px; left: 70px; width: 857px; height: 398px; border: 1px solid #BEC2D8; background: url(../images/box_bg_brun.jpg) no-repeat; }

Hope this helps anybody who might've run into the same problem!

Lchad · June 1st, 2007, 11:54 AM

Ah... glad you got the answer and posted it for all of us!!!

Ryan Fait · June 2nd, 2007, 05:59 AM

Yeah, I've noticed that before. I'm not too sure on the syntax of it, but it really shouldn't mean "An ID with this class name." You should never use ID's more than once on a page, so it shouldn't matter

kidreapertronV · June 2nd, 2007, 10:21 PM

Yeah. I made that mistake the first time around. Guess it's a rookie thing, but when I fixed it it still didn't correct the problem, til I turned the div's elements with classes into their own divs. Sigh.

I can't wait til everyone has migrated to IE7. Maybe then there will be fewer sigh's.

Thanks for the replies!

moojoo · June 6th, 2007, 05:42 PM

I wish everyone would use Firefox and be done with it =). Glad you found a solution.

kidreapertronV · June 6th, 2007, 09:33 PM

I completely agree.

Almost.

IE7 does have better text anti-aliasing. Anybody got any idea how to get Firefox to handle text like that?

Other than that, Firefox is king. No, Firefox is a god. One of those cool ones with the lightening bolts or tritons, who also turns water into wine.

Thanks for the reply moojoo : )

masonbarge · June 7th, 2007, 08:34 AM

Quote:

Originally Posted by kidreapertronV

IE7 does have better text anti-aliasing. Anybody got any idea how to get Firefox to handle text like that?

Gah, I'd never noticed. What are you talking about?

Firefox has other issues. Peeps say that the disappearing text in floated div's is w3c compliant, but even if that's right, it's a major pain in the neck.

My biggest gripe is sites where some function doesn't work in FF; Comcast and my.yahoo both have issues, eg Comcast webmail won't let you include a graphic in a composed email except in IE7

kidreapertronV · June 7th, 2007, 10:26 AM

Silly rookie mistake again. I just have cleartype turned on for IE7. Do they have a function like that for FF?

karinne · June 7th, 2007, 10:34 AM

don't think so ...

kidreapertronV · June 8th, 2007, 12:45 PM

mason, wouldn't this be a great time for a legal monopoly? just one compliant browser to rule them all.

if I find something similar to cleartype for FF, I'll post it here. Thanks, karinne.