Rounded corners in IE 7+ with/without JavaScript? - javascript

To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?

As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)

You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.

you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please

The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.

Related

Intelligent resizing background

Excuse me for this, probably spoony, question. But when skinning controls/elements I'm usually using the following concept (I don't know the correct name, but I first saw it when creating custom WinXP themes). The basic idea is to set up a sort of margins in the image that restrict resizing, only the inner parts are allowed to stretch.
http://img42.imageshack.us/img42/6188/image7rq.jpg
When using this method in my regular programming work life is easy, I just BitBlt the four corner and then StretchBlt the remaining parts into place. However I'm no expert on HTML and I cannot find anything on the internet about it. It's kinda difficult to search when you don't exactly know the name of the concept...
a) How is this method called?
b) Does anyone know how to do this using HTML, CSS, Javascript, etc.? Preferably I would like the background of a DIV element to be themed like this. It's the intention to not spend the rest of this day slicing images in Photoshop ok, that makes me feel so utterly miserable..
There's several ways to approach this. If you are allowed to target newer browsers and allow old browsers to degrade to square corners and non-gradient backgrounds, check out the new CSS 3 features.
If, however, you need to be able to support old browsers, you're going to have to fire up Photoshop, create some background images, and nest some html elements. If your background only has to scale in one direction (verically or horizontally) check out the sliding door technique.
Wouldn't be easier to use css instead? Check thishttp://jonraasch.com/blog/css-rounded-corners-in-all-browsers or do a search for 'css rounded box' or 'css rounded corners'

Border Radius for IE8

I have a problem with border radius on IE8, till now I used pie.js but I don't recommend this js library because is buggy. If you have a small site with not many html pages, it is more than ok to use that library, but if you have a heavy application in which many different frameworks are used, then is impossible to use that. Same behavior for CurvyCorners or other mega libraries.
So if anyone can help me with a small jQuery or javascript plugin to do just border-radius on IE 8 I'll be grateful for life.
Try this:
requires:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>
Javascript:
$('.box').corner();
HTML:
<div class="box">Hello</div>
CSS:
box{
width:150px;
height:28px;
padding:10px;
}
more examples:
http://jquery.malsup.com/corner/
Short of using the libraries that you described in your question, I don't think you can do curved corners in IE8.
If you really wanted them, you could probably use an image to give the curved corner effect, at the cost of increased bandwidth and messy code.
According to Microsoft:
Other Rounded Corners Solutions
We would like to point out the abundance of alternate solutions available on the Web. In addition to individual rounded corners solutions, there are also sites with frequently updated lists of rounded corners solutions that are compatible with multiple versions of Internet Explorer and other browsers.
Listed here are a few of our favorite sites for aggregated rounded corners solutions. They are presented in no particular order, and the inclusion of any link does not imply endorsement by Microsoft of the site.
CSS-Discuss Wiki, RoundedCorners:
http://css-discuss.incutio.com/?page=RoundedCorners
SmileyCat, CSS Rounded Corners "Roundup":
http://www.smileycat.com/miaow/archives/000044.php
CSS Juice, 25 Rounded Corners Techniques with CSS:
http://www.cssjuice.com/25-rounded-corners- techniques-with-css/
Check out this post: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
It covers specifically rounded corners and box shadow in IE7/8.
and also below with so many examples
http://blue-anvil.com/jquerycurvycorners/test.html
I have used the border-radius.htc in the past.
The only pain is that the CSS Urls are relative to the CSS file. HTC are relative to the page.
you can download the demo here.
Why don't you use css' :before and :after pseudo classes to add curved corners.
Your comment on Tom Will's answer suggested that you have a lot of form inputs right?
Well I assume that they will be mostly uniform in width.
Just create some classes like curved-std-width, curved-lge-width, curved-sml-width and then you can do this in your CSS:
.curved-std-width:before {
height: 5px;
background: url('curved-top-5px.png');
}
.curved-std-width:after {
height: 5px;
background: url('curved-bottom-5px.png');
}
Something like that should work pretty well without you having to go and add endless html before and after form inputs.
Otherwise you can probably do it using jQuery as well:
$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');
And then style appropriately.
Why don't you use jQuery's corner plugin?
You can easily apply corners to any element with a specific classname or ID; for example:
$("#box1").corner();
It also allows you to decorate or modify the type of corner effect you want adorning your elements.
You can also use other JavaScript solutions like CurvyCorners or even some CSS solutions. Another option is to use JavaScript to wrap <div> elements your form inputs and use CSS's background-image to emulate the look of rounded corners. For instructions on this last solution, see this tutorial.
This is ugly but might work if you know beforehand the background color of the input fields (which can be a problem with submit buttons): http://jsfiddle.net/563c5/1/
I have no idea how it will behave when rendering lots of input fields in an average computer.
IE8 supports inline CSS images, and you need only 1 small image for all four rounded corners. Any solution relying on corner images may actually require just a few extra bytes of bandwidth.
I would recommend giving Modernizr a go, the great thing about it is you can use it to substitute most (if not all) unsupported CSS3 in older browsers. I have used it on a number of large web apps without any dramas.
You can also look at the jQuery UI library that I believe has some rounded corners scripts.
I hope this helps... good luck!
you should use the alternate pie.htc, its similar thing but less buggy, and either way i don't recommend it.
Heavy use of css3 elements on these non css3 comply browsers, don't perform good, chances is that their system are not up to date too causing them extremely laggy. So it is good for them to degradation to a normal corner.
If you really want it to look good on ie, you best of using image sprite backgrounds, or you going to change to drive away a number of your visitors for lagging issues.
Not sure if it was covered by previous contributors, but I used mainly dd_roundies library, and for rounded corners alone it worked ok. Mixing corners with IE filters usually was too much to ask though.
Have you tried this: http://jquery.malsup.com/corner/
Use this : http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
Supported CSS3 Features
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
You can use image with round corner to border a div. Example:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml
Or you make some magic like:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Just another JavaScript-based solution: Nifty Corners Cube. It is released as GNU GPL and doesn't need jQuery.
Use this code to get rounded corner in IE 6+
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script>
<script>
$('#logo-navsection').corner( function() {
$("this").css("border-top", "0px 0px opx 10px")
});
</script>

Add style elements in CSS

I want to make my own custom CSS elements that will be handled by a js file of mine. Is this possible?
Here would be an example:
div {
rounded-corners:15px 15px
}
And then use Javascript to apply the styles for each browser for rounding corners.
Is there a way to do something like this?
EDIT
The point isn't to add a common support for browsers. I want to implement my own CSS things.
The answer is "no". While it is possible to easily get style values from stylesheets in Internet Explorer by accessing the currentStyle property, like so:
alert(myDiv.currentStyle['rounded-corners']);
//-> "15px 15px"
...other browsers don't support the currentStyle property, opting instead to support the W3C standard window.getComputedStyle(). getComputedStyle() doesn't include "expando" style properties in the outcome, which means your only option would be to iterate over the rules in each stylesheet instead, which could be an expensive procedure depending on how many stylesheets and rules you have. Obviously, you also lose out on the browser's cascading/computing.
IE9 and the latest versions of Firefox and Chrome all handle border-radius anyway.
And you can use CSS3 Pie to add support to older version of IE. No need to write your own script.
EDIT: I suppose you could write your own version of CSS3 Pie, but why would you want to?
You may want to look into SASS/SCSS or LESS, which both offer "mixins". These act like functions in CSS, and should let you do what you want. LESS at least can be made to work client-side through Javascript; I suspect SCSS can too.
CSS already has a property for rounded corners, called border-radius.
This is supported by virtually all browsers in current use. The only exception of any significance is IE8 and earlier.
The good news in this case is that IE8 can indeed be programmed to work the way you're asking. Other browsers cannot, but IE can, and this is lucky, as it's the one browser that needs it more often than most.
So the direct answer to your question is "sometimes". Most browsers drop the styles they don't support, but IE keeps them. It obviously don't do anything with them, but you can access them via the DOM, which means that you can do what you're asking.... but only really in IE.
In the case of rounded corners, there is already an excellent Javascript-based hack for it called CSS3Pie. This is open source, so you can examine their source code to learn how it's done.
The CSS3Pie code is quite complex though, so if you want a simpler example to work from, take a look at this older script which does the same thing a lot more simplistically. Easier to read, but not as functional. For real life use, use CSS3Pie, but for learning, this one is a better starting point.
For working with IE, I would suggest following the examples in these scripts to achieve what you're asking. For other browsers, you will have a much harder time.

CSS3PIE - how trouble free is it for IE6 - IE8

I'm wondering if folks can tell me how trouble free CSS3PIE is for IE6 - IE8 (beyond the known issues). It seems like an excellent addition to allow one to use CSS3 features -- rounded corners, gradients, shadows, etc -- I just have limited time to invest into investigating stability / errors.
Thanks
P.S. Does it turn off automatically in browsers that support CSS3?
It has worked perfectly for me and it only affects IE so you dont have to worry about the other browsers.
Don't worry it's transparent.
The only "real" problem I've been having was with opacity transitions in ie8 :
In order to make a div fade out, you need to apply this css definition to every child element :
filter: inherit
Problem is it doesn't seem to work on the shape elements css3pie generates with css only. I had to modify the minified .htc file as folows :
look for the second occurance of "shape" in the script. It's in a function called 'Aa'.
After this statement:
g=e[a]=f.p.Za("shape");
you can add:
g.style.filter="inherit";
This clearly is a hack but it works great!
It is just for IE8. IE7 deals with transparency differently (http://www.jacklmoore.com/notes/ie-opacity-inheritance)

What's the best way to apply a drop shadow?

What is the best method for applying drop shadows? I'm working on a site right now where we have a good deal of them, however, I've been fighting to find the best method to do it. The site is pretty animation heavy so shadows need to work well with this.
I tried a jQuery shadow pulgin. The shadows looked good and were easy to use but were slow and didn't work well with any animations (required lots of redrawing, very joggy).
I also tried creating my own jQuery extension that wraps my element in a couple gray divs and then offsets them a little bit to give a shadow effect. This worked well. It's quick and responsive to the animation. However, it makes DOM manipulation/traversal cumbersome since everything is wrapped in these shadow divs.
I know there has to be a better way but this isn't exactly my forte. Thoughts?
ShadedBorder is a good looking and easy to use Shadow-Library. check it out
You don't need to wrap those shadow-divs around the other content, just set them a little askew and place them on a lower z-index !-)
if your main problem is to navigate the DOM, just add a class and/or id to your element, and refer it with JQuery selectors. even better if you store the ref in a variable, so you don't need to select it too frequently
Although it is yet to have full cross-browser support, you might like to try using the CSS 3 text-shadow property.
It largely depends on how frequently your images will need to be changing, and the colored areas that they'll be covering. Because I'm guessing that you'll be needing to pay attention to IE6 compliance, most alpha-PNG solutions will cause such horrible jittery-ness that you'll spend more time in performance optimzation than you would have wanted to guess.
To solve this in the past, since our images are modified less than once a month, we call the images through a caching-PHP script which automatically applies the shadow using a pre-defined background color so we don't have to rely on any transparency. This results in faster downloads (fewer HTTP requests) and a faster-interface because there's less Javascript/CSS magic in the works.
I understand that this is a very old-school solution, and the above solutions would be entirely acceptable if your images were static, but being cross-browser compliant and animated will likely force you to do a solution of this style.

Categories