[thelist] :before and :after appearing together
Julian Rickards
julian.rickards at gmail.com
Wed Nov 14 08:32:45 CST 2007
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
More information about the thelist
mailing list