This works fine in Chrome, but not in IE8. It should just give a light-colored blue background with rounded corners and a drop shadow to the div:
.ppanel
{
background-color: rgba(0, 0, 255, .2);
color: black;
padding: 10px 10px 10px 40px;
margin: 10px 20px 20px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
Internet explorer 8 does not support rounded corners by default. You can get the result you want however by using a tool like CSS3 PIE.
Internet Explorer did not support border-radius until IE9. You will find detailed information here: http://davidwalsh.name/css-rounded-corners.
Related
Hi I am trying to add a border to button in cshtml
.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
width: inherit;
}
but all I am getting is a border when I want a shadow this is only failing in IE
any help?
-webkit- is only supported by Safari, Chrome, Opera 15+.
Therefore, your code will not work in IE or Firefox.
You could however try using:
-moz-box-shadow: 6px 6px 5px #000000; /* Firefox */
-ms-box-shadow: 6px 6px 5px #000000; /* Internet Explorer */
box-shadow: 6px 6px 5px #000000; /* CSS3 */
However, this is only supported by IE 9 or later.
box shadow in IE need no prefixing
box-shadow: 1em 0.1em 0.5em 0.05em #000000;
or older IE you need -ms
ms-box-shadow: 1em 0.1em 0.5em 0.05em #000000;
firefox will need -Moz
-moz-box-shadow: 1em 0.1em 0.5em 0.05em #000000;
if you do not need the border line you need to remove this:
border: solid #000000 1px;
or you'll end up with a 1px black line around your .linkbig and this is likely to hide your shadow if its really subtle.
-Website is only supported by Safari, Chrome, Opera.
Update your CSS like below. So that it will work in chrome, firefox and IE.
.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
box-shadow: 6px 6px 5px #000000 ;
-moz-box-shadow: 6px 6px 5px #000000;
width: inherit;
}
Try like this:
CSS:
.linkbig:hover {
-webkit-box-shadow: 6px 6px 5px #000000;
-moz-box-shadow: 6px 6px 5px #000000;
-o-box-shadow: 6px 6px 5px #000000;
box-shadow: 6px 6px 5px #000000;
}
try this
filter:
progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#000000')
I've added both outline and box-shadow to a div in my CSS code.
The div looks great on Chrome and IE but not in Firefox:
Chrome and IE:
http://i.phirune.com/csrjfyqoczob
FireFox:
http://i.phirune.com/4gsrrub3ww6e
The CSS code is as follows:
#container {
width:960px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
background-color: #415475;
-moz-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
outline:#000000 solid thick;
}
I have no idea how to fix this, any insight will be appreciated.
Why not use multiple box-shadows? Just separate your box-shadows by commas.
box-shadow:
0px 0px 0px 1px #fff,
0px 0px 0px 2px #606054,
0px -1px 9px 1px rgba(119, 119, 119, 0.4);
You can add as many has your heart desires.
This is a Firefox bug. You can only get around it. The ticket is still live, you may see at: https://bugzilla.mozilla.org/show_bug.cgi?id=480888
-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;
What browser versions are you attempting to support? Modern browsers support css3 and you don't need to do the css hacks.
here's some css3 documentation for drop shadows: http://www.css3.info/preview/box-shadow/
I have a image
<img class="user-img" src="user_img/usr.jpg" alt="username" />
and adding a radius of 100px to create a circle.
.user-img {
width: 170px;
height: 170px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-khtml-border-radius: 100px ;
border-radius: 100px;
-moz-box-shadow: 0px 10px 10px 0px #999999; /* Firefox */
-webkit-box-shadow: 0px 10px 10px 0px #999999; /* Safari, Chrome */
box-shadow: 0px 10px 10px 0px #999999; /* CSS3 */
}
and this works fine, but then I add
border: solid 7px white;
This works in FF but in Chrome the border does not follow the radius of the rounded img.
Here's a demo http://jsfiddle.net/afro360/zcQ3G/2/
Suggestions anyone?
Thanks
I am using CSS Rounded Corners and Shadow and when I run it through debugging in Visual Studio through Chrome it works just fine but when I place it onto a server and try to access it through server via Chrome or IE it does not show the shadow nor rounded corners. Is something different between server side and virtual server provided by Visual Studio?
Thanks for your help in advance.
.greenborder
{
border-radius: 15px 15px 15px 15px;padding: 8px; border: 2px solid #7F9F1A;
behavior: url(ie-css3.htc);
background-color :White ;
box-shadow: 10px 10px 5px #888;
}
UPDATED
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari, Chrome */
border-radius: 15px 15px 15px 15px; /* CSS3 */
padding: 8px;
border: 2px solid #7F9F1A;
behavior: url(ie-css3.htc);
background-color: White;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
You must use this styling to make it cross-browser compatible:
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
You can use a great little tool called Prefixer to make your CSS cross-browser. Very easy to use, saved me a lot of time.
Is there any way to add a glow around the div? Look at twitter login and how there is a blue glow around the input box, can that be done for the div?
CSS3 can do that
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Working JSFiddle.
Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
As shown before, use css: focus, border and box-shadow.
If using IE, make sure <doctype> is specified.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
jsFiddle example.
Also you will face some problem with Internet Explorer while dealing this issue. IE-9 How ever supports box-shadow but the previous versions don't, Check it out here for making it work in all versions of IE