Sent by Adam Kuehn on 23 January 2004 20:08
A. R. Templeton wrote:
>I have a content space defined with a background image that repeats
>down across the y-axis. It is supposed to provide the background for
>the main weblog content for as long as the text goes down the page.
>Right now it repeats along with the content in IE but not in
>Mozilla. Here is what I have done.
>
>#blogBody {
> background: url(container_bg.gif) repeat-y;
>}
>
>.blog {
> float: left;
>}
>
>I was under the impression that the .blog class would inherit the
>properties of the div and the background would repeat down the page
>in all browsers. Does anyone have any suggestions on how to fix this?
First, let's be clear about terminology. Backgrounds do not inherit
by default. On the other hand, backgrounds *are* transparent by
default. It is a small difference, but can be important sometimes.
Without seeing your actual page, it may be that your problem is
caused by the float. A floated element is removed from the document
flow. In compliant browsers, this means that a float will *not*
cause it's containing element to expand. Accordingly, the floated
..blog entries may protrude from the containing #blogBody div -
meaning the transparent but protruding .blog entries will show the
background of whatever else happens to be behind them. In
non-compliant IE, of course, the containing div *will* expand to
enclose the float, and you'll get the background of #blogBody, as you
wanted.
The solution is to add a clearing element into the html after each
float. It can be something as simple as a <br class="clear"/> and
then add this to your css:
br.clear {clear: left;}
With this addition, compliant browsers will see the <br> within the
normal flow, but will make sure that this element goes below the
float, expanding the container along with it. Your background will
shine through in both compliant browsers and in IE.
That is, if I've guessed correctly without being able to see a test page....
HTH,
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/