I have a box shadow on the #footermain div in the CSS, but I cant get it to show above the green footer. Ive tried everything and I cant figure it out.
#footermain {
background: #1f6c04;
width: 100%;
-moz-box-shadow: 0 -5px 6px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 -5px 6px rgba(0,0,0,0.5);
box-shadow: 0 -5px 6px rgba(0,0,0,0.5);
}
#footerinner {
height: 150px;
width: 960px;
position: relative;
margin: 0 auto;
}
Here is my CSS for those that dont want to inspect the page
Give
position : relative;
to #footermain.
Related
I am using CSS box-shadow property which is working fine on google chrome and Firefox but unfortunately its not working on Safari browser (mobile and mac both) Safari version I am using is 14.
my CSS code :
.testing-class{
content: '';
height: auto;
position: absolute;
z-index: 9;
width: 100%;
bottom: 0px;
display: block;
-webkit-appearance: none;
-moz-box-shadow: 0px 7px 48px 74px #fff;
-webkit-box-shadow: 0px 7px 48px 74px white;
box-shadow: 0px 7px 48px 74px #fff;
margin-top: 21px;
}
it's only working for display: block elements; try to add that to your css code
Faced the same issue in safari . either box shadowing was not working or when you add border-radius: 50%; to your css you will see a box like structure hidden behind the button
when I removed the position:absolute and used the css
.testing-class{
content: '';
height: auto;
z-index: 9;
width: 100%;
bottom: 0px;
display: block;
-webkit-appearance: none;
-moz-box-shadow: 0px 7px 48px 74px #fff;
-webkit-box-shadow: 0px 7px 48px 74px white;
box-shadow: 0px 7px 48px 74px #fff;
margin-top: 21px;
}
it was working perfectly fine in safari after removing position:absolute .. But i wanted position:absolute to be included . so i created an inner and outer tag . For example
<div className="outer">
<div className="inner">
</div>
</div>
Add more margin space to
.outer{
position: absolute;
z-index: 3;
margin: 9px;
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%),
0 1px 18px 0 rgb(0 0 0 / 12%);
}
.inner {
z-index: 3;
and rest of the css
}
only change here is adding more margin around the button will occupy the button space and will block access to rest of the elements so used outer and inner.Above listed fix worked for me .If it doesnot work try to experiment around it , it might work .
i am trying to add shadows at here: http://prntscr.com/eiyg7i
But i cant figure that out.
I've added this code:
.nav-dropdown {
box-shadow: none;
}
but it just make the box shadow to none.
Edit: i have added this code
.nav-dropdown {
-webkit-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
box-shadow: 2px 6px 21px -2px rgba(0,0,0,0.75);
}
but it still gets wrong http://94.247.169.169/~welloteket/ - it still get shadows here at the top
You can offset the box-shadow in horizontal and vertical direction. Unfortunately doing so will make the shadow appear more prominent on the side you shift it to.
Would this work for you?
http://codepen.io/connexo/pen/gmWjNJ
.bar {
background-color: #f8f8f8;
height: 60px;
}
.dropdown {
height: 200px;
width: 400px;
margin: 0 auto 50px;
box-shadow: 0 10px 10px #666;
/* | | |
x-shift | |
y-shift |
size of shadow
*/
}
/* This uses z-index
.bar2 {
background-color: #f0f0f0;
height: 60px;
z-index: 2;
position: relative;
}
.dropdown2 {
height: 200px;
width: 400px;
margin: 0 auto 50px;
box-shadow: 0 0 10px #666;
}
<div class="bar"></div>
<div class="dropdown"></div>
<div class="bar2"></div>
<div class="dropdown2"></div>
Alright, I know that this question has been asked before, but I have a kind of different CSS and the effect is different too. My CSS:
div.side-bar {
text-align: right;
width: 11%;
margin-left: 88%;
border-left: 1px solid #000;
position: fixed;
height: 88%;
-webkit-box-shadow: -5px 0px 5px 0px #616161;
box-shadow: -5px 0px 5px 0px #616161;
}
So using the following code gives me a shadow to the left side as I wanted, but it also adds small shadows to both top and bottom sides too. How to have a shadow only on the left side?
Try changing your box-shadow property by adding a negative spread radius like this: http://jsfiddle.net/vW8VS/3/
div.side-bar {
text-align: right;
width: 11%;
margin-left: 88%;
border-left: 1px solid #000;
position: fixed;
height: 88%;
-webkit-box-shadow: -5px 0px 5px -3px #616161;
box-shadow: -5px 0px 5px -3px #616161;
}
That should let you push it off to just one side without worrying about the top and bottom.
I found to get the proper box-shadow effect to the left side of a div only I had to play around more with the css. use the below styles, they worked great for what I was trying to achieve.
-webkit-box-shadow: -35px 0px 20px -35px #aaa;
box-shadow: -35px 0px 20px -35px #aaa;
I have a jQuery tooltip that works correctly in all other browsers(including IE8), but the popup is coming under the page content.
#datasearch2-tooltip .tipBody
{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
margin-top: -18px;
padding: 10px;
-moz-box-shadow: 10px 0 0 15px #000;
-webkit-box-shadow: 0 0 15px#000;
box-shadow: 0 0 15px #000;
z-index: 9999;
}
The z-index of 9999 should set the tooltip above all over content, as it does in other browsers. Anybody have any ideas?
You'll need to add the position rule:
#datasearch2-tooltip .tipBody
{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
margin-top: -18px;
padding: 10px;
-moz-box-shadow: 10px 0 0 15px #000;
-webkit-box-shadow: 0 0 15px#000;
box-shadow: 0 0 15px #000;
z-index: 9999;
position: relative;
}
z-index only affects elements that have position set (other than position: static)
Take a look at this page for more info on z-index
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div