Hi
I have been attempting to use CSS to build boxes with rounded corners. Here is my attempt: Rounded Box (<!-- m --><a class="postlink" href="http://www.brewsterware.com/box/box.php">http://www.brewsterware.com/box/box.php</a><!-- m -->)
In Firefox this looks great, however in IE the rounded corners at the top dont quite meet up with the vertical lines, and the corners at the bottom dont quite meet up with the horizontal line.
Has anyone managed to make a box with rounded corners successfully? Can anyone shed any light on the code I'm using?
Thanks,
JoeBullet-proof rounded corners (<!-- m --><a class="postlink" href="http://www.albin.net/CSS/roundedCorners/">http://www.albin.net/CSS/roundedCorners/</a><!-- m -->)Originally posted by Fang
Bullet-proof rounded corners (<!-- m --><a class="postlink" href="http://www.albin.net/CSS/roundedCorners/">http://www.albin.net/CSS/roundedCorners/</a><!-- m -->) Looks like that is what he is using. Now he needs to figure out what he changed.Originally posted by Triumph
Looks like that is what he is using. Now he needs to figure out what he changed. Looks like the only difference is you tried to use the rounded corners as a background image instead of leaving them in the front.All sorted now.
Thanks for looking.
JoeWould it be a dirty solution to just nest 4 divs and slap a corner in each of them, aligning it as nescessary with one background in each corner?
It seems a lot more elegant than actually placing layout images into the content which would inevitably bung up the display of a page once CSS is removed.
To put my coding where my mouth is, here is the solution:
<!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners.htm">http://www.dxdec.com/wod/roundedcorners.htm</a><!-- m -->
Works perfectly in Firefox 1.0/Win and IE 6/Win, well I looked at it briefly to make sure there were not any glaringly obvious screwups.
The divs are all contained in a single div with an ID and referenced accordingly without the need for excess ID tags and bunk markup. They also inherit the width (and the height if you need them to) so you can create lots of nice rounded corner columns.
And a further example to show how it can be used to achieve beautiful layouts which, as far as I know, display fine in Firefox 1.0/Win and IE 6/Win - <!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners2.htm">http://www.dxdec.com/wod/roundedcorners2.htm</a><!-- m -->
Just need to make some different corners and change some of the box colours now.Originally posted by WoD
Would it be a dirty solution to just nest 4 divs and slap a corner in each of them, aligning it as nescessary with one background in each corner?
It seems a lot more elegant than actually placing layout images into the content which would inevitably bung up the display of a page once CSS is removed.
To put my coding where my mouth is, here is the solution:
<!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners.htm">http://www.dxdec.com/wod/roundedcorners.htm</a><!-- m -->
Works perfectly in Firefox 1.0/Win and IE 6/Win, well I looked at it briefly to make sure there were not any glaringly obvious screwups.
The divs are all contained in a single div with an ID and referenced accordingly without the need for excess ID tags and bunk markup. They also inherit the width (and the height if you need them to) so you can create lots of nice rounded corner columns.
And a further example to show how it can be used to achieve beautiful layouts which, as far as I know, display fine in Firefox 1.0/Win and IE 6/Win - <!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners2.htm">http://www.dxdec.com/wod/roundedcorners2.htm</a><!-- m -->
Just need to make some different corners and change some of the box colours now.
Hopefully there's nothing wrong with your method. I like it much more than the other examples I've seen. Much more straight-forward and simple.
The 2nd example is a bit flawed though. You specified heights on all the div's. The text in the boxes extends outside of the boxes under certain circumstances...Originally posted by WoD
Would it be a dirty solution to just nest 4 divs and slap a corner in each of them, aligning it as nescessary with one background in each corner? Dirty or not, it works.
It's simple and compact. Good job. You should name it after yourself.The text in the boxes extends outside of the boxes under certain circumstances...
Lalalala, I was hoping nobody would notice how lazy I was being, I just wanted to do something pretty with the boxes.
I hereby name it: "Phil's 'probably been thought of by someone else already' system for creating rounded corners with the minimum of HTML markup and a crapload of CSS"
I am going to work on some more examples using additional nested divs to build up some layering and some details to the boxes, more than rounded corners can be achieved with this, methinks.
Thanks for the positive feedback anyway.Originally posted by WoD
Lalalala, I was hoping nobody would notice how lazy I was being, I just wanted to do something pretty with the boxes.
I hereby name it: "Phil's 'probably been thought of by someone else already' system for creating rounded corners with the minimum of HTML markup and a crapload of CSS"
I am going to work on some more examples using additional nested divs to build up some layering and some details to the boxes, more than rounded corners can be achieved with this, methinks.
Thanks for the positive feedback anyway.
Most of the die-hards would totally balk at such an 'unsemantic' solution... but I've never worried about that. If they ever took one step outside their 770px fixed-width blog templates, they'd realise that in the real world of design, there's going to be loads of empty divs used for styling only. Heck, the Zen Garden has a bunch there at the bottom.
It works the best in that situation -- where there's styled corners, but the box is otherwise bare. As soon as you get into trying to style the edges, also, you're suddenly landed with eight nested divs, and that's where it gets a little ugly. Eight nested divs is still lighter than nine table cells, especially with the images necessary to prop them open.
I've thus far only done rounded corners on fixed boxes... and there, you can do it with a single image and a touch of css-spriting: <!-- m --><a class="postlink" href="http://uwmike.com/layout/pastel/layout.html">http://uwmike.com/layout/pastel/layout.html</a><!-- m -->
I have been attempting to use CSS to build boxes with rounded corners. Here is my attempt: Rounded Box (<!-- m --><a class="postlink" href="http://www.brewsterware.com/box/box.php">http://www.brewsterware.com/box/box.php</a><!-- m -->)
In Firefox this looks great, however in IE the rounded corners at the top dont quite meet up with the vertical lines, and the corners at the bottom dont quite meet up with the horizontal line.
Has anyone managed to make a box with rounded corners successfully? Can anyone shed any light on the code I'm using?
Thanks,
JoeBullet-proof rounded corners (<!-- m --><a class="postlink" href="http://www.albin.net/CSS/roundedCorners/">http://www.albin.net/CSS/roundedCorners/</a><!-- m -->)Originally posted by Fang
Bullet-proof rounded corners (<!-- m --><a class="postlink" href="http://www.albin.net/CSS/roundedCorners/">http://www.albin.net/CSS/roundedCorners/</a><!-- m -->) Looks like that is what he is using. Now he needs to figure out what he changed.Originally posted by Triumph
Looks like that is what he is using. Now he needs to figure out what he changed. Looks like the only difference is you tried to use the rounded corners as a background image instead of leaving them in the front.All sorted now.
Thanks for looking.
JoeWould it be a dirty solution to just nest 4 divs and slap a corner in each of them, aligning it as nescessary with one background in each corner?
It seems a lot more elegant than actually placing layout images into the content which would inevitably bung up the display of a page once CSS is removed.
To put my coding where my mouth is, here is the solution:
<!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners.htm">http://www.dxdec.com/wod/roundedcorners.htm</a><!-- m -->
Works perfectly in Firefox 1.0/Win and IE 6/Win, well I looked at it briefly to make sure there were not any glaringly obvious screwups.
The divs are all contained in a single div with an ID and referenced accordingly without the need for excess ID tags and bunk markup. They also inherit the width (and the height if you need them to) so you can create lots of nice rounded corner columns.
And a further example to show how it can be used to achieve beautiful layouts which, as far as I know, display fine in Firefox 1.0/Win and IE 6/Win - <!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners2.htm">http://www.dxdec.com/wod/roundedcorners2.htm</a><!-- m -->
Just need to make some different corners and change some of the box colours now.Originally posted by WoD
Would it be a dirty solution to just nest 4 divs and slap a corner in each of them, aligning it as nescessary with one background in each corner?
It seems a lot more elegant than actually placing layout images into the content which would inevitably bung up the display of a page once CSS is removed.
To put my coding where my mouth is, here is the solution:
<!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners.htm">http://www.dxdec.com/wod/roundedcorners.htm</a><!-- m -->
Works perfectly in Firefox 1.0/Win and IE 6/Win, well I looked at it briefly to make sure there were not any glaringly obvious screwups.
The divs are all contained in a single div with an ID and referenced accordingly without the need for excess ID tags and bunk markup. They also inherit the width (and the height if you need them to) so you can create lots of nice rounded corner columns.
And a further example to show how it can be used to achieve beautiful layouts which, as far as I know, display fine in Firefox 1.0/Win and IE 6/Win - <!-- m --><a class="postlink" href="http://www.dxdec.com/wod/roundedcorners2.htm">http://www.dxdec.com/wod/roundedcorners2.htm</a><!-- m -->
Just need to make some different corners and change some of the box colours now.
Hopefully there's nothing wrong with your method. I like it much more than the other examples I've seen. Much more straight-forward and simple.
The 2nd example is a bit flawed though. You specified heights on all the div's. The text in the boxes extends outside of the boxes under certain circumstances...Originally posted by WoD
Would it be a dirty solution to just nest 4 divs and slap a corner in each of them, aligning it as nescessary with one background in each corner? Dirty or not, it works.
It's simple and compact. Good job. You should name it after yourself.The text in the boxes extends outside of the boxes under certain circumstances...
Lalalala, I was hoping nobody would notice how lazy I was being, I just wanted to do something pretty with the boxes.
I hereby name it: "Phil's 'probably been thought of by someone else already' system for creating rounded corners with the minimum of HTML markup and a crapload of CSS"
I am going to work on some more examples using additional nested divs to build up some layering and some details to the boxes, more than rounded corners can be achieved with this, methinks.
Thanks for the positive feedback anyway.Originally posted by WoD
Lalalala, I was hoping nobody would notice how lazy I was being, I just wanted to do something pretty with the boxes.
I hereby name it: "Phil's 'probably been thought of by someone else already' system for creating rounded corners with the minimum of HTML markup and a crapload of CSS"
I am going to work on some more examples using additional nested divs to build up some layering and some details to the boxes, more than rounded corners can be achieved with this, methinks.
Thanks for the positive feedback anyway.
Most of the die-hards would totally balk at such an 'unsemantic' solution... but I've never worried about that. If they ever took one step outside their 770px fixed-width blog templates, they'd realise that in the real world of design, there's going to be loads of empty divs used for styling only. Heck, the Zen Garden has a bunch there at the bottom.
It works the best in that situation -- where there's styled corners, but the box is otherwise bare. As soon as you get into trying to style the edges, also, you're suddenly landed with eight nested divs, and that's where it gets a little ugly. Eight nested divs is still lighter than nine table cells, especially with the images necessary to prop them open.
I've thus far only done rounded corners on fixed boxes... and there, you can do it with a single image and a touch of css-spriting: <!-- m --><a class="postlink" href="http://uwmike.com/layout/pastel/layout.html">http://uwmike.com/layout/pastel/layout.html</a><!-- m -->