2 replies [Last post]
ecosmo
Offline
newbie
Last seen: 11 years 39 weeks ago
Joined: 2007-06-09
Posts: 7
Points: 0

I have a div to be aligned on the right that has transparent background and transparent drop shadow. I am following the drop shadow technique described here: http://www.alistapart.com/articles/cssdropshadows.

My test page is at: http://ecosmo.org/design/test/test.html.

There is a gap between the shadow on the left and the box. I can't figure out why it is there. There is also a gap on the right.

Another problem I couldn't figure out is the transparent background of the .transparent box doesn't show up...

Does anyone have any idea? I have been looking up and down the CSS and still don't know why...

Your help would be greatly appreciated.

Thank you.

TEst

#container {
width: 800px;
margin: 0 auto;
background:url(IMG_0063.JPG);
height: 470px;
}

.anotherdiv {
float:right;
width: 300px;
margin: 0;
padding: 0;
}

.p-shadow {
width: 90%;
float:right;
background: url(shadowAlpha.png) no-repeat bottom left !important;
background: url(shadow.gif) no-repeat bottom left;
margin: 10px 10px 0 0 !important;
margin: 10px 5px 0 0;
}

.p-shadow div {
background: none !important;
background: url(shadow2.gif) no-repeat right top;
padding: 0 !important;
padding: 0 0 6px 6px;
}

.p-shadow .transparent-box {
float: right;
border: 1px solid #a9a9a9;
margin: -6px -6px 6px 6px!important;
margin: 0;
background: url(transparency.png) repeat top left;
}

.space {
height: 50px;
}





Welcome


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam imperdiet justo in mauris. Morbi eu nibh. Nulla malesuada, eros non cursus posuere, purus eros egestas velit, a rhoncus mi quam auctor dui.





AttachmentSize
shadow.gif4.25 KB
shadow2.gif3.95 KB
shadow2.gif3.95 KB
shadowAlpha.png3.45 KB
transparency.png121 bytes
IMG_0063.JPG75.66 KB
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

.p-shadow div { 

.p-shadow div { background: none !important; background: url(shadow2.gif) no-repeat right top; padding: 0 !important; padding: 0 0 6px 6px; }

.p-shadow .transparent-box {
float: right;
border: 1px solid #a9a9a9;
margin: -6px -6px 6px 6px!important;
margin: 0;
background: url(transparency.png) repeat top left;
}

You have specified a margin-left of 6px. That pushes the box 6px aware from its container with the shadow.

I wouldn't ever use a style rule with just DIV. DIV is generic you should give the element a class name and then reference the class name in your style rules. By referencing DIV you are constraining yourself to either
- never use another nested DIV in that part of the page
- always having to override the styles you introduce with the DIV style rule

As things stand, the .p-shadow div style rules all apply to the .p-shadow .transparent-box.

ecosmo
Offline
newbie
Last seen: 11 years 39 weeks ago
Joined: 2007-06-09
Posts: 7
Points: 0

Thanks!

It works!!! Thanks!!!