I am using background-size on Chrome and found out it is CSS3 which is not supported in old versions of IE. Hence I have gone through some posts and someone recommended to use this filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
HTML:
<span class="num_blue_small small"><span class="numberText">4</span></span>
CSS:
.num_blue_small
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/images/num_blue_small.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
}
.small
{
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
vertical-align: middle;
line-height: 35px;
}
.numberText
{
color: White;
}
By implementing the "filter", it works perfectly in IE7; however, it turns invisible in Google Chrome.
If I include background: url(/images/num_blue_ssc.png) no-repeat; in .num_blue_small CSS class, it will work fine in Chrome but IE 7 will show 2 same images with different sizes.
What should I do to get it fixed?
you could try the background-size polyfill
An IE behavior adding support for background-size to IE8. of Louis Remi
Progressive Enhancement is the mantra I live by. It means "Have fun
with CSS3 and don't worry about IE8 users; they'll never notice
they're missing out on your gorgeous text-shadows and gradients,
anyway".
All was well until I discovered the elegance of background-size:
cover; and background-size: contain;. The first one, for instance,
allows an image to completely cover a background, without having to
send a 1920x1080 background image down the pipes.
Unfortunately, they don't degrade gracefully: websites would likely
appear broken to IE8 users
They offer that feature:
correct position and size of the background image
updated position and size on browser resize
updated image, position and size when the background-image is modified
but seems they have some limitation:
multiple backgrounds (although the :after trick can still be used)
4 values syntax of background-position
any repeat value in background-repeat
non-default values of background-[clip/origin/attachment/scroll]
resizing the background when the dimensions of the element change
Hello guys i have the following..
.selected2:first-child{
background: url(../img/css/first-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2{
background: url(../img/css/second-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2:last-child{
background: url(../img/css/third-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
it works perfect in ie9, chrome, opera, firefox... but in ie8 i get only the second background on every li element.
What is the problem? ie8 does not support first-child?
You have two issues here: Firstly the :last-child selector, and secondly the RGBA background colours.
IE8 does not support :last-child. (It does support :first-child though)
You can see the browser support for these (and all other CSS selectors) at Quirksmode.org.
The quickest and easiest way to deal with this if you need IE8 support is simply to add classes to the relevant elements and style them that way instead. It's the old-school way of doing things, but then IE8 is something of an old-school browser.
If you really need to use selectors like :last-child, and you really need to support IE8, there are Javascript solutions you could try:
http://selectivizr.com/ -- this is a JS library that adds support for a bunch of CSS selectors to old IE versions. It requires you to also use another lib such as jQuery that it uses to do the hard work.
https://code.google.com/p/ie7-js/ -- this is a JS library that tries to patch old IE versions to fix as many of the bugs and quirks as possible and back-fill as many missing features as possible. It's pretty wide-ranging in what it does. It does include most of the advanced CSS features.
Either of these libraries should do the trick for you to add :last-child support, unless you have users with JS turned off.
However as I said, IE8 does support :first-child, so missing selectors isn't the reason for your code not working in this case. The reason your CSS isn't working for :first-child is because you're using an RGBA colour for the background. IE8 doesn't support RGBA colours.
For this, the only solution available is a JS library called CSS3Pie. This adds various CSS3 features to IE6/7/8, including RGBA colour support (albeit to a limited extent; it doesn't do everything).
IE8 and lower don't support those pseudo classes. There is a Javascript tool that makes IE7 and IE8 behave closer to IE9 and adds support for first and last childs.
https://code.google.com/p/ie7-js/
In the downloaded file, you will find IE7.js IE8.js and IE9.js just use the IE9.js it includes the other two...
As previously mentioned, you can't use the :last-child pseudo-class, but you could do .selected2 + .selected2 etc. to target the one you need.
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.
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).
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
How can I create rounded corners using CSS?
Since CSS3 was introduced, the best way to add rounded corners using CSS is by using the border-radius property. You can read the spec on the property, or get some useful implementation information on MDN:
If you are using a browser that doesn't implement border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), then the links below detail a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.
CSS Design: Creating Custom Corners
& Borders
CSS Rounded Corners 'Roundup'
25 Rounded Corners Techniques with CSS
I looked at this early on in the creation of Stack Overflow and couldn't find any method of creating rounded corners that didn't leave me feeling like I just walked through a sewer.
CSS3 does finally define the
border-radius:
Which is exactly how you'd want it to work. Although this works OK in the latest versions of Safari and Firefox, but not at all in IE7 (and I don't think in IE8) or Opera.
In the meantime, it's hacks all the way down. I'm interested in hearing what other people think is the cleanest way to do this across IE7, FF2/3, Safari3, and Opera 9.5 at the moment..
I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.
If you want to use all corners with same radius this is the easy way:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
but if you want to control every corner this is good:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.
As told in other answers, this works beautifully on Firefox, Safari, Camino, Chrome.
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
I would recommend using background images. The other ways aren't nearly as good: No anti-aliasing and senseless markup. This is not the place to use JavaScript.
As Brajeshwar said: Using the border-radius css3 selector. By now, you can apply -moz-border-radius and -webkit-border-radius for Mozilla and Webkit based browsers, respectively.
So, what happens with Internet Explorer?. Microsoft has many behaviors to make Internet Explorer have some extra features and get more skills.
Here: a .htc behavior file to get round-corners from border-radius value in your CSS. For example.
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
Of course, behavior selector does not a valid selector, but you can put it on a different css file with conditional comments (only for IE).
The behavior HTC file
With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at "Border Radius".
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
jQuery is the way i'd deal with this personally. css support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to me even though some will no doubt argue otherwise. Theres a plugin I recently used for a project at work here: http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas
There's always the JavaScript way (see other answers) but since it's is purely styling, I'm kind of against use client scripts to achieve this.
The way I prefer (though it has its limits), is to use 4 rounded corner images that you will position in the 4 corners of your box using CSS:
<div class="Rounded">
<!-- content -->
<div class="RoundedCorner RoundedCorner-TopLeft"></div>
<div class="RoundedCorner RoundedCorner-TopRight"></div>
<div class="RoundedCorner RoundedCorner-BottomRight"></div>
<div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/
.Rounded {
position: relative;
}
.Rounded .RoundedCorner {
position: absolute;
background-image: url('SpriteSheet.png');
background-repeat: no-repeat;
overflow: hidden;
/* Size of the rounded corner images */
height: 5px;
width: 5px;
}
.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;
/* No background position change (or maybe depending on your sprite sheet) */
}
.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}
.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}
.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}
As mentioned, it has its limits (the background behind the rounded box should be plain otherwise the corners won't match the background), but it works very well for anything else.
Updated: Improved the implentation by using a sprite sheet.
I personally like this solution the best, its an .htc to allow IE to render curved borders.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
In Safari, Chrome, Firefox > 2, IE > 8 and Konquerer (and probably others) you can do it in CSS by using the border-radius property. As it's not officially part of the spec yet, please use a vendor specific prefix...
Example
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
The JavaScript solutions generally add a heap of small divs to make it look rounded, or they use borders and negative margins to make 1px notched corners. Some may also utilise SVG in IE.
IMO, the CSS way is better, as it is easy, and will degrade gracefully in browsers that don't support it. This is, of course, only the case where the client doesn't enforce them in non supported browsers such as IE < 9.
Here's an HTML/js/css solution that I did recently. There's a 1px rounding error with absolute positioning in IE so you want the container to be an even number of pixels wide, but it's pretty clean.
HTML:
<div class="s">Content</div>
jQuery:
$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');
CSS:
/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}
.s-iwrap {
border: 1px solid #FF9933;
}
.s-iwrap2 {
margin: 12px;
}
.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.png) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}
.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}
.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}
.s .tl {
top: 0;
left: 0;
background-position: top left;
}
.s .tr {
top: 0;
right: 0;
background-position: top right;
}
Image is just 18px wide and has all 4 corners packed together. Looks like a circle.
Note: you don't need the second inner wrapper, but I like to use margin on the inner wrapper so that margins on paragraphs and headings still maintain margin collapse.
You can also skip the jquery and just put the inner wrapper in the html.
As an indication of how complex it is to get rounded corners working, even Yahoo discourages them (see first bulleted point)! Granted, they're only talking about 1 pixel rounded corners in that article but it's interesting to see that even a company with their expertise has concluded they're just too much pain to get them working most of the time.
If your design can survive without them, that's the easiest solution.
Sure, if it's a fixed width, it's super easy using CSS, and not at all offensive or laborious. It's when you need it to scale in both directions that things get choppy. Some of the solutions have a staggering amount of divs stacked on top of each other to make it happen.
My solution is to dictate to the designer that if they want to use rounded corners (for the time being), it needs to be a fixed width. Designers love rounded corners (so do I), so I find this to be a reasonable compromise.
Ruzee Borders is the only Javascript-based anti-aliased rounded corner solution I've found that works in all major browsers (Firefox 2/3, Chrome, Safari 3, IE6/7/8), and ALSO the only one that works when both the rounded element AND the parent element contain a background image. It also does borders, shadows, and glowing.
The newer RUZEE.ShadedBorder is another option, but it lacks support for obtaining style information from CSS.
If you are to go with the border-radius solution, there is this awesome website to generate the css that will make it work for safari/chrome/FF.
Anyway, I think your design should not depend on the rounded corner, and if you look at Twitter, they just say F**** to IE and opera users. Rounded corners is a nice to have, and I'm personally ok keeping this for the cool users who don't use IE :).
Now of course it's not the opinion of the clients.
Here is the link : http://border-radius.com/
To addition of htc solutions mention above, here're another solutions and examples to reach rounded corners in IE.
There is no "the best" way; there are ways that work for you and ways that don't. Having said that, I posted an article about creating CSS+Image based, fluid round corner technique here:
Box with Round Corners Using CSS and Images - Part 2
An overview of this trick is that that uses nested DIVs and background image repetition and positioning. For fixed width layouts (fixed width stretchable height), you'll need three DIVs and three images. For a fluid width layout (stretchable width and height) you'll need nine DIVs and nine images. Some might consider it too complicated but IMHO its the neatest solution ever. No hacks, no JavaScript.
I wrote a blog article on this a while back, so for more info, see here
<div class="item_with_border">
<div class="border_top_left"></div>
<div class="border_top_right"></div>
<div class="border_bottom_left"></div>
<div class="border_bottom_right"></div>
This is the text that is displayed
</div>
<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.png);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.png);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.png);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.png);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>
It works quite well. No Javascript needed, just CSS and HTML. With minimal HTML interfering with the other stuff. It's very similar to what Mono posted, but doesn't contain any IE 6 specific hacks, and after checking, doesn't seem to work at all. Also, another trick is to make the inside portion of each corner image transparent so it doesn't block text that is near the corner. The outer portion must not be transparent so it can cover up the border of the non-rounded div.
Also, once CSS3 is widely supported with border-radius, that will be the official best way of making rounded corners.
Don't use CSS, jQuery has been mentioned several times. If you need full control of the background and border of your elements give thejQuery Background Canvas Plugin a try. It places a HTML5 Canvas element in the background and allows yo to draw every background or border you want. Rounded corners, gradients and so on.
Opera does not support border-radius yet (apparently it will be in the release after version 10). In the meantime, you can use CSS to set an SVG background to create a similar effect.