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.
You could use the technique described here (it's for an Apple Dashboard Widget, but the HTML/CSS should be the same). It uses nine images and doesn't require any JavaScript.
Steve
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.
I don't know what you mean by semantic or stretchable rounded corners, but you can use the CSS border-radius attributes for Webkit and Firefox, and simply use a combination of PNG images and this HTML Component, which adds PNG alpha-channel support to IE6.
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...
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>
I'm pretty sure the minimal non js rounded corner technique for ie6/7 requires 2 small images (top and bottom) and 1 extra div for fixed width boxes, and 3 small images (bottom, left and right) and 3 extra divs for a variable width box.
Fixed width
<div class="box">
<div class="bottom">
gjkgjk
</div>
</div>
.box {background:url(image to round off the top) top left no-repeat:padding:0;}
.box .bottom {background:url(image to round off the bottom) bottom left no-repeat:margin:0;width:100px}
Variable width
<div class="box">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">
gjkgjk
</div>
</div>
</div>
</div>
.box {background:url(image to round off the top-left) top left no-repeat:padding:0;}
.box .right{background:url(image to round off the top-right) top right no-repeat:padding:0;margin:0;}
.box .bottom-left {background:url(image to round off the bottom-left) bottom left no-repeat:margin:0;padding:0;}
.box .bottom-right {background:url(image to round off the bottom-right) bottom right no-repeat:margin:0;padding:0;}
If you want a rounded border rather than just a rounded solid background the above can be tweaked using border, negative margin, position relative/absolute, width and background-image position so it works, but can't remember off the top of my head how.
This is the best I've found till now.
http://apptools.com/examples/roundedbox.php
It is a cross browser, W3C valid and use only one image . but we can't make border with this.
This solution for a fixed width witdth border.
it use little markup ` Content
` with valid css,html http://www.askthecssguy.com/examples/roundedCorners/index.html
If you use a PNG8 with alpha transparency, images can have transparency in IE6. The caveats are that you can only have fully transparent or opaque images (anything in between will just be rendered 100% transparent) and that you can't use a large color palette or gradients.
Depending on your design, there is a possible workaround or you can use this in conjunction with the PNG8 option above. If your background is simple, you can just match anything outside the corners with the background. Using this technique, you could easily make do with a single image for your corners if you make use of sprites. The markup would look similar to the following:
<div id="content">
<span class="lt"></span>
<span class="rt"></span>
<span class="lb"></span>
<span class="rb"></span>
</div>
And the CSS:
#content {position:relative;}
/*These styles are generic and can be reused over multiple corner types*/
.lt, .rt, .lb, .rb{
background:url(../images/button_corners.png) no-repeat;
width:5px;
height:5px;
position:absolute;
}
.lt, .rt{top:0px;}
.rt, .rb{right:0px;}
.lt, .lb{left:0px;}
.rb, .lb{bottom:0px;}
/*The following would be used specifically for #content, but you could reuse a different part of the same image for a different container or button */
#content .lt{background-position:-200px 0px;}
#content .rt{background-position:-245px 0px;}
#content .lb{background-position:-200px -45px;}
#content .rb{background-position:-245px -45px;}
There are advantages and disadvantages to this approach:
Advantages
It's cross-browser, it works with liquid and fixed layouts, and you can use it for menu items (hover will work in IE6 for links) or containers, it doesn't require JavaScript, and using a CSS sprite, you can do it with a single image, even with multiple corner types.
Disadvantages
It won't work with every layout, borders can be tricky or ugly, it adds a few extra elements into the markup, and if you use it for a link item with a hover effect, IE6 has a hover flicker that can only be solved with a little bit of JavaScript. However, that JavaScript is only one line and can be included in a conditional comment:
<script type="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script>
If you don't mind using Javascript for just IE, you can use conditional comments and Javascript to dynamically insert VML roundrects that can do what you want (or just use static conditionally commented VML). CSS3 border radius covers Gecko, WebKit and KHTML. Opera requires an SVG background image.
Here's an example pulled from one of my projects: http://entr0py.org/misc/reader/basic/
I'm told it still has some WebKit bugs relating to background coloring, but it works fine in everything else.
Hi I recently had to overcome the same problem, A resizeable widget with rounded corners, inside border, drop shadow and a gradient background. It also has to work on all browsers (IE6 included).
Assuming you are using photoshop and look after your source files properly it is fairly easy. In total it requires 4 images (up to 7 depending on how you support IE6), these can all be sliced from the original photoshop file so its pretty easy.
Check out the link below.
http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow
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)