.element {
border-radius: 15px;
position: absolute;
transition: box-shadow 0.5s;
}
.element:hover {
box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}
<div class="element" style="width: 100px; height: 50px;"></div>
This code works perfectly in Chrome and IE 11, BUT when I use this code in SharePoint, the IE does not detect the hover-event. Chrome does. Only when the div has a background color, the IE detects the event.
Does anyone know why?!
The box-shadow property has support from IE9.
Please check for the CSS property browser support.
Use css prefix click here for link which will help you. here is basic list.
-moz- (Firefox)
-o- (Opera)
-ms- (Internet Explorer)
-webkit- (Safari, Chrome)
also consider for use higher version of IE for future development very less people use it nowadays if you have any new difficulty in new version you do not have to think about too much for it , its Microsoft fault they doing things way different than Open Source world.
Related
My Box Shadow is not showing in IE7 and IE8.
#bodyContainer{
background: url(../images/site_bg.png) repeat ;
margin: 0px auto;
width:1000px;
float:left;
position:relative;
border: 1px solid #EEEEEE;
/*background:#FFFFFF;*/
box-shadow: 0 0 5px 0 #000000;
}
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
and
There are article about CSS3 Box Shadow in Internet Explorer and Box-shadow.
Hope this helps
also you can use
style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;"
style="filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='-2', OffY='-2', Color='#c0c0c0', Positive='true')"
You have to use the non-standard IE filter property. See this article
box-shadow is a feature of CSS3
hence it is not supported below ie9
you can check the compatibity here:
http://caniuse.com/#search=box-shadow
Box-Shadow is not compatible below IE9
Always check compatibility of CSS Properties using following link
http://caniuse.com/css-boxshadow
Accoding to Box-shadow's MDN compatibility table, Box-shadow doesn't support in IE7 and IE8.
Check the same link (Notes section) for more info on alternative properties like Dropshadow and shadow properties.
Syntax:
filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)
filter:progid:DXImageTransform.Microsoft.Shadow(sProperties)
In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.
I cannot seem to get a border radius no matter what I do. I am running the latest internet explorer and nothing is happening. I have gone into the developer tools and set the rendering to ie9 and it still refuses to read:
border-radius: 4px;
As far as I understand, ie9 does in fact support this CSS3 element. Am I do doing wrong? I am trying to get the browsers to see more or less the same page. Any suggesions? Any help is greatly appreciated!
Try adding some of the following:
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
Be sure that these items are in the correct css class you are trying to apply to the form element.
I recommend you to define all border properties. Here is an example;
input{
border: solid 4px #06C;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 40px;
width: 100px
}
Here is a working Live Demo, running smooth in my IE9.
Note: Here is a list of browsers supporting CSS3 and others will not.
YOU have a website for create border-radius css code
border-radius : 4px; // for new ie, opera, chrome, firefox
is a new W3C specification for new browser,
if you can use border radius for old browser, you can use
-webkit-border-radius : 4px; // for old chrome, old safari
-moz-border-radius : 4px; // for old firefox
-o-border-radius : 4px; // for old opera version
for old ie version, you want to use CSS3PIE.
Here's my code - This works in chrome, firefox and safari .. I have tested it on Windows 7
However in IE 8 and Opera browser the following code is not working and instead of showing a circled image I am getting Image in square form
<div id="hotspot-img1-0">
<ul>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web" style="width:100px;height:100px;background:#fff;border:2px solid #ccc;-moz-border-radius:52px;-webkit-border-radius:52px;">
</ul>
</div>
CSS
#hotspot-img1-0{
top: 570px;
left: 67px;
height: 104px;
width: 104px;
border-top-left-radius: 52px;
border-top-right-radius: 52px;
border-bottom-right-radius: 52px;
border-bottom-left-radius: 52px;
box-shadow: 0px 2px 5px 0px;
border-top-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid
}
#Sandhurst; first thing bad markup write like this:
<div>
<ul>
<li>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web">
</li>
</ul>
</div>
& Answer for the question use background-image instead of img :
li{
background:url(image.jpg) no-repeat;
-moz-border-radius:52px;
-webkit-border-radius:52px;
border-radius:52px;
width:200px;
height:200px;
}
The border-radius CSS3 declaration is unsupported in Internet Explorer 8 and below. You can use the -o-border-radius declaration to get rounded borders in Opera.
CSS3 Pie may help with getting rounded borders in older versions of Internet Explorer, but I'd recommend just leaving them as square images (following the principles of graceful degradation and progressive enhancement).
It's a CSS3 issue. IE and Opera don't handle it well. You can use a solution like http://fetchak.com/ie-css3/ to resolve it if you would like.
Good luck!
At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).
http://www.css3.info/preview/rounded-border/
Here is a website http://www.danielmall.com/ where the images are being displayed in circle. The author of the website has used jquery and css to get it working with both IE and firefox. Check out the page source and you will get some interesting info on how to use it.
Image maps could do it for you.
Clicking content below image with higher z-index
http://jsfiddle.net/u9cYZ/
http://jsfiddle.net/u9cYZ/3/
To my knowledge, there is no way to get Opera or IE to clip an <img> to a circle using CSS. border-radius will clip background images set in element styles though.
You might be able to clip things using SVG, but I wasn't able to get any of the examples on that page to work in Opera.
Is it possible to bring curve edges to divs using html and css only...without using images.
Not in a way that's compatible cross browser (in particular, IE does not yet support it). In CSS 3, you can use border-radius, which Safari and Firefox support currently as -webkit-border-radius and -moz-border-radius. For example
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
padding: 10px;">
This is a sample div.
</div>
Yes, it is possible, but it is a CSS 3 feature that may not work on all browsers (or not the same in all browsers). See this article for an example.
I assume you mean border-radius. Yes, it is possible in proper browsers (not IE) with border-radius. As it's a CSS3 property, it's not yet properly implemented and you need to do some trickery to make it work:
-moz-border-radius: 10px; /* for firefox */
-webkit-border-radius: 10px; /* for safari & chrome */
border-radius: 10px; /* for others (opera) */
Take a look at http://www.css3.info/preview/rounded-border/ for more info.
Yeah, it, certainly, is technically possible (the best kind of possible, I guess), here is an example (be sure to check the source, it really is a cool technique).