Invisible Background

I had a go at the Faux Columns (http://www.alistapart.com/articles/fauxcolumns/) method at ALA (http://www.alistapart.com/) but the background appears in IE but not Mozilla.

HTML:

<div id="container">

<div id="left">
<p>Lots of Lipsum.</p>
</div>

<div id="right">
<p>
menu item<br />
menu item<br />
menu item<br />
menu item<br />
menu item<br />
menu item<br />
</p>
</div>

</div>

</div>


CSS:

body {
background : #39f;
text-align : justify;
color : #000;
font : small Arial, Helvetica, sans-serif;
}

#container {
width: 600px;
background: #fff url(fauxtest.gif) repeat-y 50% 0;
margin: 0 auto;
}

#left {
width: 400px;
float: left;
background: transparent;
}

#left p {
padding: 3%;
}
#right p {
padding: 3%;
color : #ccc;
font-weight: bold;
text-align: center;
}

#right {
width: 200px;
float: right;
background: transparent;
}


Thanks.

Weird.. :confused:
Moz doesn't have any bugs as far as the 'background' shorthand goes and the only obvious error is one too many </div> tags in your markup sample; though that shouldn't cause any problem.
I'm confused :o

I'm confused :o


I thought it was only me :p LOL.

Anyone else got any ideas?

I tried setting #left p and #right p to have transparent backgrounds but it didn't make any difference.

C'mon guys :( .

I haven't looked closely at the ALA article you mentioned, but the floats on your two paragraphs have Firefox/Mozilla treating them as if they were not within the #container div.

Add a height to #container or remove the floats to see what I'm describing. This doesn't solve your problem but hopefully helps.

Hehee... Whoops!
I looked straight past the problem :o

You need to clear your floats. There are a couple of ways to go about this...
1) add a clearing div. This involves adding an empty div with a class of "clear" or similar AFTER you close both columns but BEFORE you close the container.
<div class="clear"><!-- --></div>
Then, add this class to your CSS...

div.clear {
clear:both;
height:0;
}


OR

2) You can clear it using generated content so that you don't have to add anything to your markup. Adding the following snippet to your CSS should fix your problem...

div#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html #container {height: 1%;}
/* End hide from IE-mac */

Thanks :p !

Out of curiousity, why the empty comment tags? I've not noticed a difference either way...


<div class="clear"><!-- --></div>

Out of curiousity, why the empty comment tags? I've not noticed a difference either way...

Mozilla 1.4 didn't render empty tags. The first FireFox was based on Moz 1.4 and I believe had the same problem. I also remember Andy Budd discussing this once in relation to one of the mac browsers.
Other than that -- it's force of habit :o