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
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 have used CSS border-image to attain certain effect in the menu bar. Its working good in Firefox. But doesn't work in Chrome.
See www.imptools.com. Is there any workaround for chrome?
CSS
nav.mainMenu{
width:#16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
width:100%; height:50px; overflow: visible;
background: url('../imgs/gun_metal.png');
border-radius: 15px; box-shadow: 0px 3px 3px #dark;
li{
float:left; width: auto;
margin: 0 20px; overflow: visible;
height: 80px; position:relative; top:-15px;
a{
width: auto; height: auto;
float:left; padding: 0 15px;
font-family: #sansSec;
color:#light;
line-height: 80px;
font-size: 24px;
font-weight: bold;
text-shadow: 3px 3px 3px #dark;
}
}
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
}
}
Try setting the border before setting the image like so
border: 50px solid transparent;
I have noticed that in Safari this statement doesn't matter but it does matter in chrome
According to chrome platform status,
Blink will begin to require a border style in order to paint border images. This has always been required by the spec, but has not been enforced. In order to not be affected by this change, add e.g. 'border-style: solid' where border-image is used.
so adding
border-style: solid;
should fix your issue.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
-webkit-border-radius: 15px 0 15px 15px;
-moz-border-radius: 15px 0 15px 15px;
-khtml-border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
-webkit-border-image:url(../imgs/menu_active_bg.png);
-moz-border-image:url(../imgs/menu_active_bg.png);
-khtml-border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
-webkit-border-image-width:15px 15px 0px 0px;
-moz-border-image-width:15px 15px 0px 0px;
-khtml-border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
-webkit-border-image-outset: 0px 15px;
-moz-border-image-outset: 0px 15px;
-khtml-border-image-outset: 0px 15px;
}
Try it like below.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}
I'm using this free template for a study project: jsFiddle
My problem appears when I'm using IE7, because the botton margin of the DIV with id="outerwrapper" totally disappear.
Here you can find the css code for the outerwrapper:
div#outerwrapper {
margin: 20px auto;
width: 960px;
margin-bottom: 20px;
background-color: #CEC7AA;
-moz-box-shadow: 0 0 3px 3px #333;
-webkit-box-shadow: 0 0 3px 3px #333;
box-shadow: 0 0 3px 3px #333;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
Any suggestions?
A margin needs something to "bounce" on. It can't "bounce" against the body. So instead of using a margin-bottom to the child, rather use a padding-bottom to the parent:
body {
padding-bottom: 50px;
}
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.
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