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.
Related
.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.
This question already has answers here:
Gradients in Internet Explorer 9
(10 answers)
Closed 9 years ago.
I have refered many sites for applying linear gradient to ie-9 and some links are saying not support as well as some link are saying it will work.can any body clear whether we can uselinear gradient or not?
This is my code:
.top_block
{
position: fixed;
display: block;
height: 150px;
width: 105px;
z-index: 9999;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D3D3D3));
background: -moz-linear-gradient(top, #E9E9E9, #D3D3D3);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#D3D3D3',GradientType=0 );
margin-left:72px;
left: 36%;
top: 32%;
border: 6px solid white;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px;
}
I have applied this not working in ie-9 as well as working working fine in firefox and ,chrome.
No, IE9 does not support the standard CSS gradients. This was only introduced in IE10.
IE9 does, however, support the old IE-specific -ms-filter style, in the same way as older IE versions did, so you can use this to generate gradients in IE9.
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#AAAAAA')";
However, it is important to note that these filter gradients (and in fact IE's filter styles in general) have a number of bugs and quirks, some of which can make them difficult to work with.
For example, they are incompatible with CSS border-radius. If you use a filter gradient and border-radius on the same element, the gradient background will be displayed on top of the rounded corners and will hide them.
There is no way around this problem using the filter gradients.
So if you need to use gradient backgrounds and rounded corners on the same element in IE9, the best solution is to use a polyfill script such as CSS3Pie, which implements standard CSS gradients into IE9, and does it in a way that is compatible with border-radius.
This isn't the only problem you'll encounter when using filter styles, so my preference would be to avoid using them wherever possible. Polyfill scripts like CSS3Pie generally make things a lot easier to work with, and often do a good job of working around or avoiding the bugs in the fiter styles.
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.
Is it possible to create a rectangle with rounded edges without using an image? For example:
Thank you.
This is a good tutorial to understand rounded border for any div:
http://www.css3.info/preview/rounded-border/
Or you can round a border of a certain div like this:
#div1 {
-moz-border-radius: 15px; //for mozilla support
-webkit-border-radius: 15px; //for chrome support
border-radius: 15px;
}
in a nut shell:
You can combine these as you like. -webkit-... will only be recognized by WebKit browsers (Chrome, Safari), -moz-... will only be recognized by Mozilla-based browsers (Firefox.)
EDIT:
You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:
table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:first-child td:last-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:last-child { -webkit-border-top-left-radius: 15px; }
Hope this helps.
Something like this, with your own customizations:
HTML
<div class="outer">
<div class="top">Settings</div>
This is some text. It is part of an example of rounded borders in css. It is two lines long by now, I suppose.
</div>
CSS
div.outer{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
background-color: #333;
color: #8AF;
padding: 0px 20px;
}
div.outer .top{
margin: 0px -20px;
padding: 0px 20px;
background-color: #8AF;
color: #000;
}
JSFiddle Example
You can use the css property border-radius.
However it is not supported on older browser.
Here are some examples and also browser support info.
border---radius: [ | <%> ] [ | <%> ]?
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
height: 150px;
Width:150px;
}
Real World Example: This should show a grey box with rounded corders in most browsers except IE < 7
HTML
<div id="RoundCorners">
</div>
CSS
#RoundCorners
{
border-radius: 15px;
moz-border-radius: 15px; //If using Firefox
background-color: #333;
}
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).
Make a rectangle clip and place a rectangle with thick and round border over it.
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).