Menu
I want to make a cross-browser (FF3, IE6, Safari, Opera), W3C valid (HTML and CSS both), stretchable (horizontally vertically), without JavaScript and with Semantic and lesser HTML markup Round CORNER. Images can be used for IE6.
I've tried and tested many techniques available on community. But everything has one of the problems mentioned above . If anyone knows what I want please share with me?
Remember I want to make it without any type of JavaScript, jquery or any type of js.
565
The two major rendering engines have supported CSS3 for quite some time, which makes rounded corners as simple as:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
Of course, this doesn't have any effect on IE6 or 7 (it works in IE8) or 8 so you need to implement the nasty stacked division with images for the corners, which doesn't fit your semantic requirement.
I'm not a fan of display-hacks that involve javascript or css-hacks - so I use CSS3 and check that the squared-off version in IE7 looks acceptable. I've been doing this for a while as IE never used to support PNG transparency either - which meant you couldn't nicely overlay a rounded corner image on a patterned background. IE8 is a big improvement, so the problem does start to go away - but I understand your desire to make it work on IE6 and above.
UPDATE: Various CSS3 bits and pieces that were originally planned to be included in IE8 were actually removed from the final release. border-radius was one of the victims.
102
The short answer is you can't do everything you want without CSS3 - which isn't implemented in any but the latest versions of browsers.
So, the answer is to either use CSS3 (as detailed by Sohnee above) or learn to love the javascript / divs / images solutions. And make sure it displays ok when a browser with none of these looks at it...
30
The best solution to date is CSS3Pie.
It allows you to add rounded corners to IE using CSS.
You can use CSS border-radius for all the other browers, and CSS3Pie for IE.
It uses the IE-specific behavior style, so isn't standard CSS, but it does mean you get properly semantic HTML (no spurious divs for layout), and you don't need to worry about JQuery plug ins either.
It is Javascript (of sorts), but only needs to be run on IE; all other browsers will use normal CSS to deal with it, and won't even load the IE-specific code.
(btw IE9 now does support border-radius... but of course, IE6/7/8 are all still out there and will be for some time to come)
37
This should allow you to get the desired result. Old stacked DIVs method, with a single big background image .You have to create a very big background image, e.g. 2000 x 2000 pixels, where you will draw a rectangle with rounded corners. I recommend to save it as a .GIF with transparent background to ensure compatibility with IE6, since you want to avoid JavaScript. Note that borders, in the example, are just to help figuring out where element are appearing and can be removed.
I tested it on IE6, IE7, Firefox 2 and 3, Safari and Opera. Hope this helps.
<html>
<head>
<style type="text/css">
.RoundRectInside
{
width: 100%;
background: url(BigBackground.gif) top left no-repeat;
overflow: hidden;
}
.RoundRectOutside
{
width: 20em;
height: 20em;
background: url(BigBackground.gif) bottom left no-repeat;
overflow: hidden;
position: relative;
}
.RoundRectTopRight
{
float: right;
/* Width and Height should correspond to width and height of rounded corner */
width: 30px;
height: 30px;
background: url(BigBackground.gif) top right no-repeat;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.RoundRectBottomRight
{
float: right;
/* Width and Height should correspond to width and height of rounded corner */
width: 30px;
height: 30px;
background: url(BigBackground.gif) bottom right no-repeat;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="RoundRectOutside">
<div class="RoundRectInside">
<div>Content goes here</div>
<div class="RoundRectTopRight"></div>
</div>
<div class="RoundRectBottomRight"></div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
