I got a problem rendering box-shadows over floating divs!
Ive tested in chrome and firefox with the same result.
<html>
<head>
</head>
<body>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
</body>
</html>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards
/Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;
-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.
Demo: jsfiddle.net/q5yf3
If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.
HTML:
<div class="bs up"></div>
<div class="bs"></div>
CSS:
div.bs {
float:left;
clear:left;
margin:1em;
width:200px;
height:200px;
background:#aaa;
box-shadow:0 8px 8px #000;
-moz-box-shadow:0 8px 8px #000;
-webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }
Demo: jsfiddle.net/VaVhy
That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.
looks fine in firefox because you are using -moz-box-shadow, for webkit browsers you will have to use -webkit-box-shadow
Related
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
I found out that using PIE.htc will hellp to resolve the problem with IE7-8 when using box shadow.
I did exactly as they are explaining on the official website: http://css3pie.com/
But I can't get it to work on IE7 and IE8:
this is my code:
.shadow {
behavior: url(PIE.htc);
width: 200px;
height: 200px;
border: 1px solid #696;
text-align: center;
-webkit-box-shadow: #666 0px 0px 5px;
-moz-box-shadow: #666 0px 0px 5px;
box-shadow: #666 0px 0px 5px;
background: #EEFF99;
}
<div class="shadow">
Example
</div>
Just put your PIE.htc file in the same directory where you have put your html and hopefully it will work.
behavior: url(PIE.htc);
according to Documentation
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Reference Images: Image1
Image 2
Give .shadow{ position: relative}
For PIE to work properly, give it a position through CSS.
i have a div which has a ribbon background image to it. I'm wanting to position my div with the ribbon backgrounnd over another div (div 2) so it looks like the ribbon is wrapped around the 2nd div.
Now this works fine in Chrome and safari and i have had to use assitional css settings for firefox but IE and Opera both display my ribbon div about 25px higher than in chrome or safari.
Im not sure why this is and i cant seem to get it not to do positon right ( i need to move it down about 25px somehow only in these two browsers)
(div 1)
<div class="side-ribbon4"><img src="assets/img/sidebar/1.png" width="118" height="118" /></div>
div 1 css:
.side-ribbon4 {
width:28px;
height:21px;
margin-left:111px;
padding-right:0px;
float:right;
text-align:center;
margin-top:2273px;
position:absolute;
z-index:30;
}
im placing it on top of this div (div 2)
div 2 css:
.categories-box2 {
width: 200px;
float: left;
border:solid;
border: 1px solid #cccccc;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
margin-bottom: 30px;
margin-top:10px;
margin-left: 20px;
text-align: center;
background-color: #FFF;
/* [disabled]margin-left: 30px; */
overflow: hidden;
padding-top: 20px;
padding-bottom: 20px;
position:relative;
}
http://jsfiddle.net/ZnRSm/3/
.side-ribbon4 {position: relative;}
.categories-box2 {position: absolute;}
<div class="side-ribbon4">
<img src="http://placehold.it/118x118" width="118" height="118" />
<div class="categories-box2"> </div>
</div>
You'll want to do some study of CSS positioning and why it usually shouldn't be combined with floats. For one thing, absolutely-positioned elements are typically placed inside (and therefore relative to) relatively-positioned elements.
One other hint is that if you're having this type of problem, where browsers are rendering your layout differently, it probably means you have a bad layout. IE9+, Firefox, Chrome, and Safari are all quite standards-compliant and should show you nearly identical results.
Since you're new to SO I'll remind you to kindly select an answer, if one is provided, by clicking the checkmark.
I am requested to make the following design:
Here's how I'm trying to achieve the cascaded shadow:
box-shadow: -6px 0px 10px #514E49
But it results in the shadow being displayed in the opposite direction:
I tried changing the h-shadow parameter to 6px, but then the shadow is only visible in the rightmost edge.
I tried using inset as Emil suggested, but it causes the v-shadow to display inset as well and becomes visible inside the box, which should be avoided, here is what it looks like:
try this:
box-shadow:inset 6px 0px 10px #514E49;
edit:
box-shadow: 6px 0px 10px #514E49;
float:right;
http://jsfiddle.net/6V7Et/4/
you have to reverse the order of the menu
Another way to avoid float:right and reversing the menu is by using a negative spread and increased h-shadow like this:
.box {
background: #817E77;
display: inline-block;
width: 100px;
height: 40px;
box-shadow: inset 10px 0px 10px -4px #514E49;
float:left;
}
jsFiddle result
I believe this will best be tackled with z-index since your problem is the other divs are hiding the previously rendered ones.
so:
.box {
....your stuff here....
float:right
}
http://jsfiddle.net/XKNn4/
Another solution, one that doesn't involve reversing the order of the menu or using z-index would be to put the box-shadow on a pseudo-element.
demo
Relevant CSS:
li {
overflow: hidden;
position: relative;
box-shadow: 6px 0px 10px #514E49;
/* the other styles */
}
li:not(:first-child):after {
position: absolute;
right: 100%; width: 100%; height: 100%;
box-shadow: 6px 0px 10px #514E49;
content: '';
}
Good day.
I'm using plenty of CSS3 effects and I'm having problems rendering the same effects in IE 7 and 8 with the help of CSS3 Pie.
It works very well for some of the effects I require, however one of the known issues of CSS3 Pie is layout, more specifically CSS3 Pie makes top margins disappear in the element where it is applied, I only had such problem in IE 7 so far, IE 8 doesn't show the same issue.
I ask if someone knows how to solve this problem, I would like to keep it simple only using CSS to solve such issue, I think a different approach not restrained to CSS might be needed thats why I ask for help.
<style type="text/css" media="screen,projection">
#centerContainer {
width:940px;
margin-top:76px; /* without effect in the layout when CSS3 Pie is applyed */
min-height:200px;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
background-color:#FF6;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.css3pie {
behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>
<div id="centerContainer" class="css3pie">
</div>
Solutions and suggestions are appreciated. Thank you.
I've used a wrapper div around the centerContainer div, and set the wrapper div to a padding-top equal to the same value of the margin-top centerContainer div.
<style type="text/css" media="screen,projection">
#wrapper {
paddin-top:76px;
/* same effect as the margin-top:76px; in the centerContainer */
}
#centerContainer {
width:940px;
min-height:200px;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
background-color:#FF6;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.css3pie {
behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>
<div id="wrapper">
<div id="centerContainer" class="css3pie">
</div>
</div>