CSS Background Image Appears In All Floats 1

[iamPariah]

Last night, this page (

http://quarkvsindesign.com/template.html)

looked exactly as intended. Today, with no changes whatsoever to the xHTML or CSS, the background image on the .BlogPost DIV is repeated (and shifted) by other all subsequent floats. The floats shouldn't have a background, but they're also ignoring any background-image: none; attributes.

I'm at my wits end. I would appreciate any help I can get.

The CSS is in the header for testing purposes.

Thanks,

P

 

[ChrisHunt]

Well, it's looking OK to me in Firefox (apart from the top bit of the rounded blue box being offset a pixel or two to the left). You might want to reconsider your use of black text on a dark blue background, though.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[philote]

I'd first make sure your page validates and then see how it looks.

 

[iamPariah]

I guess I wasn't clear about what the problem is and what help I need.

In my copy of FireFox (and IE and Opera), the .BlogPost background (the watermarked lily and butterfly over the blue) re-appears behind the floated pullquotes and illustrations. It shouldn't. That background should only appear once, just behind the yellow post title.

The blue box offset is because of this problem--the lily and butterfly image is being offset because of the coding problem I can't figure out.

This is the problem I'm asking for help with. WHY are all floats contained within the .BlogPost class picking up the background from the .BlogPost class?

-P

 

[Vragabond]

I must admit I see the problem in IE6, but not in Mozilla. In Mozilla the only problem is the misalignment of the .BlogPost background with the .wrapper background. You could try adding background: transparent; to all child elements -- maybe IE tries to inherit the background.

 

[iamPariah]

I've tried adding background: transparent to the Floated elements, but IE and FireFox both ignore it and inherent the background any way.

What's even wierder is that I can specify a new background for the floats, and it will appear, but so with the inhereted background.

BTW, the document validates WITH this problem.

Can you offer ANY suggestion as to why the background is inhereting? The CSS is inline in the page if you view the source.

--P

 

[philote]

I didn't see this problem in FF either, only in IE. I think it is related to your floats according to

http://www.positioniseverything.net/articles/hollyhack.html.

Here's an excerpt from that page:

A very large percentage of IE/Win bugs are triggered by the lack of any stated dimensions on elements that contain nested floats. In other words, if you have a box without either a width or a height, and nest one or more floats inside, some very weird display bugs may declare themselves.

I'm betting your problem is related to that. Try adding a height of 1% to .BlogPost and see if that fixes it.

 

[iamPariah]

Hallelujah! That did it! I merely needed to add width and height properties to .BlogPost.

THANK YOU, Philote!

--P

 

[tgreer]

Let's give a star, shall we?



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting