[thelist] :before and :after appearing together

[Julian Rickards]

Hi:

Sorry, I pressed Enter too soon.

Here is a sample of the code:

<div id="content">
  <div id="primarynav">...</div>
  <div id="primarycontent">...</div>
  <div id="secondarycontent">...</div>
</div> <!-- end of div#content -->

I have floated #primarynav, #primarycontent and #secondarycontent to the
left so in order to have the background of #content appear behind all of
them, I floated #content to the left as well. This works fine.

However, the designer wants curved corners on the background which means
three backgrounds, a top, a middle and a bottom. I could do it with multiple
layered <div>s but I decided to apply the backgrounds using #content:before
(for the top background image), #content for the main background image and
#content:after for the bottom background image.

Here is the code:

#content {background: url(middle-bg.png) repeat-y;}
#content:before {content: ""; display:block; height: 10px; background: url(
top-bg.png) no-repeat;}
#content:after {content: ""; display:block; height: 10px; background: url(
bottom-bg.png) no-repeat;}

The results in FF and Opera are that the backgrounds for all of them appear
but the order of the backgrounds is :before, :after, #content so that it
appears as if the curved top is immediately followed by the curved bottom
and then the middle background.

I assumed that #content:after would appear after #content but this doesn't
seem to be the case.

Any ideas?

----------------
Now playing: Ozric Tentacles -
Erpsongs<http://www.foxytunes.com/artist/ozric+tentacles/track/erpsongs>
posted with FoxyTunes <http://www.foxytunes.com/signatunes/>

-- 
Blog: http://pen-and-ink.ca
E-mail: julian dot rickards at gmail dot com