I've tried asking about this on a couple of other forums, but apparently my code is too advanced for those forums. Every respondant replies with "have you tried validating your code?" and ignoring everything else I've written.
Of course the code validates.
Two nights ago, this page (<!-- m --><a class="postlink" href="http://quarkvsindesign.com/template.html">http://quarkvsindesign.com/template.html</a><!-- m -->) 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 all subsequent floats. The floats shouldn't have a background, but they're also ignoring any background-image: none; or transparent; attributes.
In IE 6x and FireFox 1, on three different systems, 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 page validates (except for an image border=0 I need to clean out), so it isn't malformed code (at least as far as the W3C xhtml trans 1.0 validator sees).
What's even wierder is that I can specify a new background for the floats, and it will appear, but so will the inhereted background.
BTW, the document validates WITH this problem.
Can you offer ANY suggestion as to why the background is inhereting?
I'm at my wits end. I would appreciate any help I can get.
The CSS is inline in the header (for testing). Please, have a look. I could REALLY use some help with this.
Thanks,
PTry changing
.BlogPost {
background: url(images/bg_post.jpg) no-repeat scroll top;
margin-bottom: 25px;
}
to
.BlogPost {
background: transparent url(images/bg_post.jpg) no-repeat scroll top left;
margin-bottom: 25px;
}
Sometimes leaving out a few of the other values in the background property can make browsers do funky things.Thanks for the try, ToiContien, but that didn't fix it. I added the transparent color to all class/ID background: properties, but the page still has the same issue.
--PIs this fixed?Hallelujah! It's fixed now thanks to someone on Tek-Tips (solution (<!-- m --><a class="postlink" href="http://www.tek-tips.com/viewthread.cfm?qid=968346&page=1">http://www.tek-tips.com/viewthread.cfm? ... 346&page=1</a><!-- m -->)).
This is what the problem was:
.BlogPost is a container DIV that holds, along with text and other things, several inline float classes. Each of those floats was picking the background image assigned to .BlogPost...
.BlogPost {
background: transparent url(images/bg_post.jpg) no-repeat scroll top center;
margin-bottom: 25px;
{
...And causing it to appear again and offset.
Someone over at Tek-Tips (URL to post above) pointed out that odd bugs appear in IE, FireFox, and other browsers when classes like .BlogPost contain floats, and when those container classes (.BlogPost) don't have width AND height properties.
I had tried adding a width property but it didn't solve it. However, by just adding height: 100%, the issue of the floats picking up the background and offsetting it disappeared.
So now, the selector looks like this:
.BlogPost {
background: transparent url(images/bg_post.jpg) no-repeat scroll top center;
margin-bottom: 25px;
width: 488px;
height: 100%;
}
Hallelujah! This was driving me up a wall! The code validated. TopStyle Pro 3 said the CSS and xHTML was good, but neither knew to check for this bug (nor did I).
Of course the code validates.
Two nights ago, this page (<!-- m --><a class="postlink" href="http://quarkvsindesign.com/template.html">http://quarkvsindesign.com/template.html</a><!-- m -->) 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 all subsequent floats. The floats shouldn't have a background, but they're also ignoring any background-image: none; or transparent; attributes.
In IE 6x and FireFox 1, on three different systems, 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 page validates (except for an image border=0 I need to clean out), so it isn't malformed code (at least as far as the W3C xhtml trans 1.0 validator sees).
What's even wierder is that I can specify a new background for the floats, and it will appear, but so will the inhereted background.
BTW, the document validates WITH this problem.
Can you offer ANY suggestion as to why the background is inhereting?
I'm at my wits end. I would appreciate any help I can get.
The CSS is inline in the header (for testing). Please, have a look. I could REALLY use some help with this.
Thanks,
PTry changing
.BlogPost {
background: url(images/bg_post.jpg) no-repeat scroll top;
margin-bottom: 25px;
}
to
.BlogPost {
background: transparent url(images/bg_post.jpg) no-repeat scroll top left;
margin-bottom: 25px;
}
Sometimes leaving out a few of the other values in the background property can make browsers do funky things.Thanks for the try, ToiContien, but that didn't fix it. I added the transparent color to all class/ID background: properties, but the page still has the same issue.
--PIs this fixed?Hallelujah! It's fixed now thanks to someone on Tek-Tips (solution (<!-- m --><a class="postlink" href="http://www.tek-tips.com/viewthread.cfm?qid=968346&page=1">http://www.tek-tips.com/viewthread.cfm? ... 346&page=1</a><!-- m -->)).
This is what the problem was:
.BlogPost is a container DIV that holds, along with text and other things, several inline float classes. Each of those floats was picking the background image assigned to .BlogPost...
.BlogPost {
background: transparent url(images/bg_post.jpg) no-repeat scroll top center;
margin-bottom: 25px;
{
...And causing it to appear again and offset.
Someone over at Tek-Tips (URL to post above) pointed out that odd bugs appear in IE, FireFox, and other browsers when classes like .BlogPost contain floats, and when those container classes (.BlogPost) don't have width AND height properties.
I had tried adding a width property but it didn't solve it. However, by just adding height: 100%, the issue of the floats picking up the background and offsetting it disappeared.
So now, the selector looks like this:
.BlogPost {
background: transparent url(images/bg_post.jpg) no-repeat scroll top center;
margin-bottom: 25px;
width: 488px;
height: 100%;
}
Hallelujah! This was driving me up a wall! The code validated. TopStyle Pro 3 said the CSS and xHTML was good, but neither knew to check for this bug (nor did I).