Jump to content
Sign in to follow this  
Greywacke

Box-Shadow On Container Div As Inner Shadow With Background Doesn't Want To Display With Two Child Div's

Recommended Posts

i have been struggling with this for quite a while now... any suggestions? i am about to start tampering with the z-index...the html snippet is as follows:

  <div class="bodycont">   <div class="sidebar1">        </div>   <div class="content">    <h1>Heading Here (as text H1 Chaparral Pro)<hr align="center" color="#c3c1ae" noshade size="1" width="98%" /></h1>    <h2>Blah Blah (as text H2 Chaparral Pro)</h2>    <p>Trebuchet MS - size 14 - Editable text in here Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>   </div>  </div>

and the relative css is as follows:

.bodycont {background: #fffde3;box-shadow: 0px 0px 136px 27px rgba(0, 0, 0, 0.42) inset;}.content {top: 10px;float: left;width: 649px;height: 700px;color: #343434;background: inherit;}.sidebar1 {top:10px;float: right;width: 310px;height: 700px;color: #343434;background: inherit;}

the document is xhtml 1.0 transitional - and supposed to work in internet explorer, mozilla firefox, google chrome and apple safari, as well as opera. the latest versions will do which seems to work quite well, only i can just get the background and box-shadow to display on the topmost elements. if i make the background of the two children transparent or none - then the bodycont class does not have any background either. how would i get the bodycont class to display it's tan color with the inner box-shadow as specified?it's acting the same in all 5 browsers, thus it is something i do not know about, but what??? the screenshot displays with the content and sidebar1 classes having the box-shadow and it displaying, but only there and not on the bodycont class as the css specifies (see second screenshot).

post-36007-0-55149100-1323327401_thumb.jpg

Edited by Pierre 'Greywacke' du Toit

Share this post


Link to post
Share on other sites

and here is the screenshot of the page with the background and inner box-shadow on the bodycont class, which is where it is intended to be...also, this page can be viewed at http://www.greywacke.co.za/feverparties/ in windows internet explorer 9, mozilla firefox 8, google chrome 15, apple safari 5 or opera 11.

post-36007-0-52221700-1323335237_thumb.jpg

Edited by Pierre 'Greywacke' du Toit

Share this post


Link to post
Share on other sites

well guess no other web developers around this festive season - thanks anyhow, decided to add a background image (jpeg) which does display. this topic is now closed! :Doh yeah, and the text shadows were left out of ie9's compatibility - it just messes around with the layout using directX filters - and it doesn't even look that good.

Edited by Pierre 'Greywacke' du Toit

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...