My css is not working with Iexplorer, can someone explain me why this isn't working?
The HTML
<div class="myBox"> Content <div>
The CSS:
.myBox {
margin: 0.0in auto;
color: #FFF;
width: 450px;
height:450px;
padding: 12px;
text-align: left;
background-color: #444141;
border: 0px solid #4e4b4b;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.myBox h2 {
color:#f57f20
}
IE doesn't support CSS3 rounded corners, I'd suggest a fallback to using PNG images.
Just use the CSS3 property border-radius. Sure, it probably won't work until IE9, which goes back to the age old question...
Do web sites need to look exactly the same in every browser?
You should use htc file to curve corners in IE6+. In IE9 the CSS3 declarations will work. How to use htc file to curve corners you can find here http://starikovs.com/2010/08/24/css3-rounded-corners/.
Because IE does not support custom Mozilla or WebKit properties.
An option could have been using CSS3 browser-independent round corner properties, but it is not yet widely implemented across major browsers. So for now you'll have to stick to images if you want cross-browser compatibility or function with JavaScript disabled.
Related
I would like to know how to apply border-radius to IE8 and below IE8 browsers.
I know that border-radius is a HTML5 feature and IE8 doesn't support it.
I found that by using .htc we can achieve this but by using htc I am encountering the problem of black background.
I am unable to overcome this problem.
Is there any other way of applying border-radius to IE8? If so can anyone explain me how?
Option 1
http://jquery.malsup.com/corner/
Option 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
http://css3pie.com/
Option 4
http://www.netzgesta.de/corner/
Option 5
See this question
EDIT:
Option 6
https://code.google.com/p/jquerycurvycorners/
Firstly for technical accuracy, border-radius is not a HTML5 feature, it's a CSS3 feature.
The best script I've found to render box shadows & rounded corners in older IE versions is IE-CSS3. It translates CSS3 syntax into VML (an IE-specific Vector language like SVG) and renders them on screen.
It works a lot better on IE7-8 than on IE6, but does support IE6 as well. I didn't think much to PIE when I used it and found that (like HTC) it wasn't really built to be functional.
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features
http://css3pie.com/
................................................................................
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property.
so, you could use css3pie
first check this demo in IE 8 and download it from here
write your css rule like this
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/pie_files/PIE.htc);
}
note: added behavior: url(path/to/pie_files/PIE.htc); in the above rule. within url() you need to specify your PIE.htc file location
As the answer said above, CSS PIE makes things like border-radius and box-shadow work in IE6-IE8: http://css3pie.com/
That said I have still found things to be somewhat flaky when using PIE and now just accept that people using older browsers aren't going to see rounded corners and dropshadows.
HTML:
<div id="myElement">Rounded Corner Box</div>
CSS:
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
border: 1px solid red;
}
PIE.htc file can be downloaded from http://www.css3pie.com
My problem:I have a link with display block. Everything goes well on IE9. But when I add a filter in order to obtain a gradient, the cursor only has the hand on the border and on the text, not on the rest of the box.
I have test my code in jsfiddle
May I have done something wrong ?
My code will work on all browsers and versions. I just have delete code for other browser in order to be much clear.
filter works "better" for IE8.
But for IE9 i would raccomend SVG gradients.
Here you can find Microsoft's official SVG gradient background maker
You'll obtain something like this:
/* SVG as background image (IE9/Chrome/Safari/Opera) */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);
And you can add it to your rule this way:
a {
padding: 3px 5px;
margin:5px;
display:block;
border:1px solid #000;
background:#FAFAFA; /* fallback for browsers not supporting gradients */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}
Then, with conditional comments you can target IE8 again:
.ie8 a {
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}
Anyway, i suggest you to google for "Visual CSS tool" for a complete cross-browser code.
You're using only -moz-linear-gradient and it works just for older version of Firefox Mozilla.
For IE9 you can also use CSS3: linear-gradient: { ... }
For older versions of Chrome and Safari you should use -webkit-linear-gradient and for Opera -o-linear-gradient and -ms- for IE (but not everything works fine with it).
One solution is to wrap your a in another div and apply your background properties on it instead of on the a;
<div class = "container">Glee is awesome!</div>
CSS:
.container {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
border: 1px solid #000;
padding: 3px 5px;
margin: 5px;
}
a {
display: block;
}
Here's a little demo: little link.
I am using two classes like as class:before and class:after for rounded corner purpose in IE7, but its not working in IE7. Could you please help me?
.round:before{backgourn:url(top-bg.png) no.repeat top left;}
.round:after{backgournd:url(btm-bg.png) no.repeat bottom left;}`
The :before and :after pseudo-element selectors are not supported in IE7.
See this reference for more on browser support.
Use this http://jquery.lukelutman.com/plugins/pseudo/
Check this:
http://my.opera.com/SublimeYe/blog/2011/07/01/addiing-before-after-and-other-elements-in-ie-with-expression
Setting styles with .selector .before and .selector .after for IE7
.round{
zoom:expression(runtimeStyle.zoom = 1, insertAdjacentHTML('', '<div class="before"></div>'), insertAdjacentHTML('', '<div class="after"></div>'));
}
.round .before{backgourn:url(top-bg.png) no-repeat top left;}
.round .after{backgournd:url(btm-bg.png) no-repeat bottom left;}
these tags are not working in less than IE9.write a separate style for less than IE9.
Method of displaying text or images before or after the given element's contents using the :before and :after pseudo-elements supports till : IE8
For rounded corner purposes you can use the PIE.htc for IE versions.
PIE supports Internet Explorer 6-9 capable of rendering all kind of the most useful CSS3 decoration features with this PIE.htc file.
Here is the dummy CSS for your IE Solution.
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc);
for more details about the PIE you can the read the article..... http://css3pie.com/
I hope this will help you.
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
I have the following CSS class defined:
.box .login {
border: 0;
float: right;
clear: both;
height: 48px;
background: url(../images/submitr.gif) no-repeat right;
line-height: 20px;
padding: 12px 42px 16px 23px;
margin: 8px 22px;
color: #FFF;
font-weight: bold;
}
The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?
(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)
Thanks for the help! I really appreciate it :)
Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)
Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.