Thanks, it was helpful, I thought it was programming, but now I know its
not,
Thanks :)
Please, do more tips and hints for us!!
Simple Box by tedd
Note: this is a box with rounded corners. I have reviewed the available references and found similar solutions, but none that do it this way.
✓ This box was created by using eight very small gifs. One for each corner, and one for each side (total combined size of only 7.2 KB).
✓ This box automatically resizes height depending upon content. The width can be tied to the size of the viewport or set to a fixed size by changing the width value.
✓ This box can be made any size without any problems with graphics. In other words, you don't have to create a large graphic for this box to accommodate extra large sizes.
✓ This box is not affected by changes in text-zoom and holds its shape throughout all magnifications.
✓ The only known browsers that have problems with this technique are: Netscape 4.78 for Windows 2000, Netscape 4.8 for Linux, and Internet Explorer 4.0 for Window's 98.
✓ This box technique Validates under "HTML 4.01 Strict" and "W3C CSS".
✓ The technique looks fine (i.e., readable) without CSS.
✓ Here are the GIF's for the borders
Please donate $5 below for my development effort -- thank you.
This technique W3C validates under both HTML 4.01 Strict and CSS guidlines.
Enjoy.
tedd...
Comments
Guilherme Ferrolli Portaro
Tuesday, December 2, 2008 02:22
eBlogovi
Wednesday, December 10, 2008 06:46
Thanks a lot for this great tool (if i can call it tool). i'll use this
code on my new web site :)
Neil
Friday, January 9, 2009 16:33
Hi Tedd,
I've been looking at your site and I think it just brilliant! I'd just like to say thanks for the tutorials and tips which you have explained so clearly and made easy for beginners like myself.
Cheers,
Neil.
I've been looking at your site and I think it just brilliant! I'd just like to say thanks for the tutorials and tips which you have explained so clearly and made easy for beginners like myself.
Cheers,
Neil.
SasQ
Monday, January 12, 2009 21:00
Yeah, it's easy to implement and runs in many browsers, but it has one
great flaw: CRUFTY MARKUP. Those DIV's for corners and borders are
perfectly for visual purposes, and they're not semantic. They have NO
structural meaning there, only visual. So if one wants to change the
design, or use this technique to style the already made HTML structure,
he's in big trouble ;) This technique can be used only for HTML already
prepared for it, which is veeery rare.
tedd Tuesday, January 13, 2009 09:45
SasQ:
Interesting and confusing comments. I'm not sure what CRUFTY means, but it doesn't sound good.
As for my div's being not semantic, how semantic does a border have to be?
As for changing the design, you can change this to whatever you want. However, if you want rounded corners, then this is one way to do it.
As for using HTML that's already prepared for it, I have no clue as to what you are talking about. The process simply creates a page with rounded corners. If you want rounded corners, then it works. If you don't want rounded corners, then don't use it.
If you think it is limited to a very rare set of HTML, then you are wrong -- check this out:
http://webbytedd.com
There you will find dozens of pages using the technique -- and I have dozens more.
tedd
Interesting and confusing comments. I'm not sure what CRUFTY means, but it doesn't sound good.
As for my div's being not semantic, how semantic does a border have to be?
As for changing the design, you can change this to whatever you want. However, if you want rounded corners, then this is one way to do it.
As for using HTML that's already prepared for it, I have no clue as to what you are talking about. The process simply creates a page with rounded corners. If you want rounded corners, then it works. If you don't want rounded corners, then don't use it.
If you think it is limited to a very rare set of HTML, then you are wrong -- check this out:
http://webbytedd.com
There you will find dozens of pages using the technique -- and I have dozens more.
tedd
MoonKiKi Web Ajax development
Thursday, January 29, 2009 08:12
Hi,
I made last week a complete restyling of my site. I used this example for the layout. Now I saw that all your site is made equal.. if it's a problema, this evening I'll change the rounded corner template.
Great job
Nunzio Fiore
http://www.moonkiki.com
I made last week a complete restyling of my site. I used this example for the layout. Now I saw that all your site is made equal.. if it's a problema, this evening I'll change the rounded corner template.
Great job
Nunzio Fiore
http://www.moonkiki.com
tedd Thursday, January 29, 2009 09:27
Nunzio:
I'm not sure what you mean by "all your site is made equal" -- please explain.
tedd
I'm not sure what you mean by "all your site is made equal" -- please explain.
tedd
David
Saturday, February 28, 2009 06:34
Your technique doesn't work with transparency. I want to make my corners
and edges transparent, in order to use this as a DHTML dialog border.
Otherwise, the white edge surrounding the box will clearly show on top of
other colors. It's easy enough to remove the white edge from the side
images, but in order to fix the corners one must add transparency to the
pixels outside the curve. Unfortunately, with this method, the side images
run under the corners, which makes transparency useless. (You can see the
side images underneath the corner.)
Please let me know if I'm missing something. I have tried every manner of CSS to try to fix the problem. If only I could dictate where the side image started and shift that by a few pixels, I would be ok.
David
Please let me know if I'm missing something. I have tried every manner of CSS to try to fix the problem. If only I could dictate where the side image started and shift that by a few pixels, I would be ok.
David
tedd Saturday, February 28, 2009 07:46
David:
The problem isn't with the technique, but with the images and the way browsers display those images. The technique just places the images where they should go.
In other words, work on the images.
tedd
The problem isn't with the technique, but with the images and the way browsers display those images. The technique just places the images where they should go.
In other words, work on the images.
tedd
Paul
Monday, March 16, 2009 13:42
Hi, tedd:
I really like your rounded corner approach. My question is, how do you create those graphics? Pixel by pixel, or with some tool that makes it easy? I would love to try your technique but play around with different graphic components. If you have any recommendations on how to build them, I'd be quite grateful...
Paul
I really like your rounded corner approach. My question is, how do you create those graphics? Pixel by pixel, or with some tool that makes it easy? I would love to try your technique but play around with different graphic components. If you have any recommendations on how to build them, I'd be quite grateful...
Paul
tedd Tuesday, March 17, 2009 08:30
Paul:
That's the fly in this ointment -- for the technique to work, you need to create eight graphics to cover all the edges. What I've provided here works for a foreground color of #eeeeee and background color of white. But that's pretty limited. So to use this, it would be nice to have a system to create these images "as needed". I've thought about creating a program that would do that, but just don't have the time.
In any event, as I remember, I used Photoshop to create the images by first determining what background and foreground I needed. I then took my current image and removed the color (shades of gray) and then pasted it on the background with anti-aliasing on. After that I added in the foreground and just kept changing things until I got it the way I wanted -- it's a labor intensive process -- no real method.
tedd
That's the fly in this ointment -- for the technique to work, you need to create eight graphics to cover all the edges. What I've provided here works for a foreground color of #eeeeee and background color of white. But that's pretty limited. So to use this, it would be nice to have a system to create these images "as needed". I've thought about creating a program that would do that, but just don't have the time.
In any event, as I remember, I used Photoshop to create the images by first determining what background and foreground I needed. I then took my current image and removed the color (shades of gray) and then pasted it on the background with anti-aliasing on. After that I added in the foreground and just kept changing things until I got it the way I wanted -- it's a labor intensive process -- no real method.
tedd
Jamp Mark
Friday, March 20, 2009 10:52
This is my kind of box.
It can shrink or grow depending on the content so i never have to worry about breaking.
It can shrink or grow depending on the content so i never have to worry about breaking.
john
Tuesday, April 14, 2009 00:33
Hey Tedd this is truly a great box. My only question;
Is it possible to change the background color, I have tried but it doesnt seem to be working?
john
Is it possible to change the background color, I have tried but it doesnt seem to be working?
john
Edward
Saturday, April 18, 2009 09:28
thanks ,it is really classic & useful sample.I have submitted a link of
this article to our website in order to share it with more people,see:
http://www.webmasterclip.com/story/simple-rounded-box-sample
http://www.webmasterclip.com/story/simple-rounded-box-sample
Tyson
Friday, May 1, 2009 14:16
Hey Tedd.
How come I can't get it too work? I'm a amateur at this web design thing. I'm only a newbie student learning Web Design (hoping to become a good website designer in the future) in college, and I was wondering if you can help me out. I tried saving the two files from .html, and .css on my desktop (including the images).
I post the code on my Coda/TextEdit, and tried it out, but it didn't seem to work. Please help me. Thanks.
How come I can't get it too work? I'm a amateur at this web design thing. I'm only a newbie student learning Web Design (hoping to become a good website designer in the future) in college, and I was wondering if you can help me out. I tried saving the two files from .html, and .css on my desktop (including the images).
I post the code on my Coda/TextEdit, and tried it out, but it didn't seem to work. Please help me. Thanks.
tedd Saturday, May 2, 2009 07:50
Tyson:
As an amateur, then this project will be a good start to figure out how it works. It is a *really* simple example of how one can use css and html. You don't need any help, just look at what I have provided.
tedd
As an amateur, then this project will be a good start to figure out how it works. It is a *really* simple example of how one can use css and html. You don't need any help, just look at what I have provided.
tedd
Drabdesign
Tuesday, May 26, 2009 17:07
I have been looking for a box for a website I am working on and this one
fits the bill.
I know you call it a simple box, but it is still a great simple box and does everything I need.
I guess I could change color via Photoshop? Will give it a go.
Thanks though.
David
I know you call it a simple box, but it is still a great simple box and does everything I need.
I guess I could change color via Photoshop? Will give it a go.
Thanks though.
David
infra
Tuesday, June 16, 2009 21:10
Why this doesnt work in Firefox? :-(
tedd Thursday, June 18, 2009 08:18
Of course this technique works in FireFox -- what are you talking about?
When I state that it's been tested in ALL known browsers and only fails for the most ancient Netscape 4 and IE 4, which absolutely no one uses any longer, that's what I mean.
When you visit this page in FireFox, does it work? If not, please tell me what version of FireFox and what operating system you are using.
tedd
When I state that it's been tested in ALL known browsers and only fails for the most ancient Netscape 4 and IE 4, which absolutely no one uses any longer, that's what I mean.
When you visit this page in FireFox, does it work? If not, please tell me what version of FireFox and what operating system you are using.
tedd
John
Thursday, July 9, 2009 19:00
I am trying to put two different sized boxes on one page how do I work to
CSS so that I can do that?
Karen
Friday, July 10, 2009 05:15
First, thank you very much for the example, it was really useful.
I have a very weird problem and I don't have any clue about how to solve it.. I've tried many things already perhaps somebody can give me a hint about where to look.
I've changed the graphics and the border works perfectly in Firefox and also in Explorer 7 when I first load it. However, when I scroll down the page in IE 7 to the point that the upper border is no more visible and then scroll back to see the border again, the upper border and corners are not visible any more until I reload the page... any clue?
I have a very weird problem and I don't have any clue about how to solve it.. I've tried many things already perhaps somebody can give me a hint about where to look.
I've changed the graphics and the border works perfectly in Firefox and also in Explorer 7 when I first load it. However, when I scroll down the page in IE 7 to the point that the upper border is no more visible and then scroll back to see the border again, the upper border and corners are not visible any more until I reload the page... any clue?
Thanks
Friday, July 10, 2009 07:28
A great thank you for the css and the html. It's absolute great. I can
great now simple boxes with a simple border all the way to gradient
backgrounds with rounnded corners. And it is so simple to implement.
Thanks very much.
Thanks very much.
tedd Friday, July 10, 2009 09:49
john:
My example shows a single page and outlines that page with the images that makeup the rounded corners. If you want to have more than one box per page, then just repeat the html code accordingly.
Cheers,
tedd
My example shows a single page and outlines that page with the images that makeup the rounded corners. If you want to have more than one box per page, then just repeat the html code accordingly.
Cheers,
tedd
tedd Friday, July 10, 2009 09:49
Karen:
I had that problem when IE7 first came out, but I fixed it with the css rule of:
#tlc, #trc [ zoom: 1]
That line is included in the css for this demo. Check your code to make sure that line is there.
Also check my site with your IE7 and see if the problem is there. When I test it in IE7, I see no problems whatsoever.
Cheers,
tedd
I had that problem when IE7 first came out, but I fixed it with the css rule of:
#tlc, #trc [ zoom: 1]
That line is included in the css for this demo. Check your code to make sure that line is there.
Also check my site with your IE7 and see if the problem is there. When I test it in IE7, I see no problems whatsoever.
Cheers,
tedd
tedd Friday, July 10, 2009 10:00
Dear Thanks:
Sometimes, thanks makes it all worthwhile.
Cheers,
tedd
Sometimes, thanks makes it all worthwhile.
Cheers,
tedd
Jim
Tuesday, July 21, 2009 19:21
Tedd,
Cool technique. One improvement that jumped to mind would be to combine all of the images back into 1, and then use CSS 'image sprites' to just use the chunk of the image you need at any one time. This would greatly reduce the traffic from 8 images to 1.
HTH,
Jim
Cool technique. One improvement that jumped to mind would be to combine all of the images back into 1, and then use CSS 'image sprites' to just use the chunk of the image you need at any one time. This would greatly reduce the traffic from 8 images to 1.
HTH,
Jim
tedd Wednesday, July 22, 2009 11:03
Jim:
Go ahead and do that -- that could be your contribution to the collective.
Cheers,
tedd
Go ahead and do that -- that could be your contribution to the collective.
Cheers,
tedd
Sree
Monday, August 3, 2009 02:55
Tedd,
In Firefox if we have a long text ,the table is not growing.It just come out of the box.Any solution for that?
Thanks,
Sree
In Firefox if we have a long text ,the table is not growing.It just come out of the box.Any solution for that?
Thanks,
Sree
Louis
Tuesday, August 11, 2009 13:06
Awesome technique and pretty simple to do. The only problem I'm having is
that the images are repeating past the corners. It's hard to explain, but
if you check out the website you can see what I'm talking about. It appears
to be the same issue as David from Feb 28th. I'm not sure what could be
wrong with the transparent images I'm using though.
tedd Tuesday, August 11, 2009 14:13
Hi:
I reviewed the web site you provided in your link. The problem I see is that you are using id's and not classes. In css, you can use a class as many times as you want, but id's can be used only once per page.
You should change your id's to classes and try again.
Cheers,
tedd
I reviewed the web site you provided in your link. The problem I see is that you are using id's and not classes. In css, you can use a class as many times as you want, but id's can be used only once per page.
You should change your id's to classes and try again.
Cheers,
tedd
john
Thursday, August 20, 2009 16:44
Ted, great product.
I created a box from your model. My box has a thinner border and can have any color background.
I have the 8 GIF's and the HTML & CSS codes if you want to offer it to people who use your box.
The one negative to your box (if their can be one for something free) was it had to be grey or the border didn't match.
You can see the boxes in the right column of my web page. Let me know!
I created a box from your model. My box has a thinner border and can have any color background.
I have the 8 GIF's and the HTML & CSS codes if you want to offer it to people who use your box.
The one negative to your box (if their can be one for something free) was it had to be grey or the border didn't match.
You can see the boxes in the right column of my web page. Let me know!
Deniz Kuzan
Wednesday, October 14, 2009 08:06
Ted, thank you much for offering this solution.
I have one problem.
If content in the box is one below the other the box itself rizes the height and all fits together. If content is side by side, what i normally do with divs and float: left, the box-background stops its height and the side-by-side content will be positioned outside the box, underneath. I can catch this when I gave an value to box height, but I need it for a dynamic solution (CMS) and this means that I cannot know an each page, which value is needed?
On this page (here) I found, that your classes quote and text are side-by-side. In my example they would lay underneath the grey area. I can't see, how you did that?
thanks in advance
Deniz
I have one problem.
If content in the box is one below the other the box itself rizes the height and all fits together. If content is side by side, what i normally do with divs and float: left, the box-background stops its height and the side-by-side content will be positioned outside the box, underneath. I can catch this when I gave an value to box height, but I need it for a dynamic solution (CMS) and this means that I cannot know an each page, which value is needed?
On this page (here) I found, that your classes quote and text are side-by-side. In my example they would lay underneath the grey area. I can't see, how you did that?
thanks in advance
Deniz
tedd Wednesday, October 14, 2009 10:07
Deniz:
This is simply a box with rounded corners. If you want to expand this to include other things, then fine but that's beyond what I am presenting.
As far as how I did this, just look at the code. You will find it's a simple box with everything included within it.
Cheers,
tedd
This is simply a box with rounded corners. If you want to expand this to include other things, then fine but that's beyond what I am presenting.
As far as how I did this, just look at the code. You will find it's a simple box with everything included within it.
Cheers,
tedd
Jason
Tuesday, October 20, 2009 02:37
Ive been a programmer for years but never touched CSS until now, ive seen
some really complicated systems but this is nice and simple and looks great
and really easy to use. Many Thanks, Jason
Brian McFarline
Saturday, October 24, 2009 09:18
Tedd
You made my day. I was working through the excellent Css Missing Manual and I noticed a reference to your website and I now want to use your box for my website.
Brian
You made my day. I was working through the excellent Css Missing Manual and I noticed a reference to your website and I now want to use your box for my website.
Brian
Steve
Thursday, October 29, 2009 11:44
Hi Ted, Thanks for working on this it is great. Here comes the but, but I
can't figure out what I would need to do to give the inside of the boxes a
background color of white and THEN make that white color semi-transparent
so the main background image shows through. Here is a link to the site I
need these on: http://ifooddesign.com/index3.php, not the navigation
buttons, but the other boxes in the content area and the boxes on the left
hand side. Any ideas?
tedd Saturday, October 31, 2009 07:26
Thanks for the link and nice design. To do what you want would required you
to change both the css and the edge images. Not a big problem -- you just
have to work with Photoshop and learn what in css to change (color and
background... hint).
Cheers.
tedd
Cheers.
tedd
tedd Sunday, November 1, 2009 11:55
Steve:
The problem that you are experiencing has nothing to do with css. The problem is that the images you are using to go from one area to another, a transition, is suffering from anti-aliasing problems.
Solution -- create two images, namely the main center and the surrounding outer. Use whatever colors you want for both areas. Then create a transition zone from one area to the other area via eight different edges, namely top-edge, top-edge-right, top-edge-left, left-edge, right-edge, bottom-edge, bottom-edge-right and bottom-edge-left. Once you have created those eight images, then simply replace mine with those.
Good luck,
tedd
The problem that you are experiencing has nothing to do with css. The problem is that the images you are using to go from one area to another, a transition, is suffering from anti-aliasing problems.
Solution -- create two images, namely the main center and the surrounding outer. Use whatever colors you want for both areas. Then create a transition zone from one area to the other area via eight different edges, namely top-edge, top-edge-right, top-edge-left, left-edge, right-edge, bottom-edge, bottom-edge-right and bottom-edge-left. Once you have created those eight images, then simply replace mine with those.
Good luck,
tedd
Nazcar
Wednesday, November 4, 2009 05:02
nice one Tedd.
Madde
Wednesday, November 4, 2009 07:38
Hi thanks for the trick with rounded corners
I have a problem (http://i239.photobucket.com/albums/ff59/88madde/boxsample.jpg) image repeat.
I use the same code like you but changed the images in photoshop, i changed white to transparent.
Is there any way to correct this?
thanks
I have a problem (http://i239.photobucket.com/albums/ff59/88madde/boxsample.jpg) image repeat.
I use the same code like you but changed the images in photoshop, i changed white to transparent.
Is there any way to correct this?
thanks
piyush
Tuesday, November 17, 2009 04:47
tedd,
on my website the background color is not white so if i try to put this rounded box, it show's extra space with white color on top and right side. how can i get rid of this space or how can i change white color to my background color ??
on my website the background color is not white so if i try to put this rounded box, it show's extra space with white color on top and right side. how can i get rid of this space or how can i change white color to my background color ??
AKJ
Tuesday, November 17, 2009 09:39
Any thoughts on how to get this to work in a CMS like Joomla.
Thanks
Amanda
Thanks
Amanda
tedd Thursday, November 19, 2009 13:44
piyush and Madde
Please read previous before asking a question that has been answered.
Thanks,
tedd
Please read previous before asking a question that has been answered.
Thanks,
tedd
tedd Thursday, November 19, 2009 13:46
Amanda:
No clue -- I always roll my own. That way I have only myself to blame when things don't work right. But on the other hand, I usually can fix any problems I encounter.
Cheers,
tedd
No clue -- I always roll my own. That way I have only myself to blame when things don't work right. But on the other hand, I usually can fix any problems I encounter.
Cheers,
tedd
JimL
Friday, December 11, 2009 17:15
I think I'll keep on using HTML for my boxes with rounded corners, and use
CSS for the rest...
To make a rounded-corner box I create an image with rounded corners in Photoshop about 200 x 200 pixels with the rounded corners tool (similar to the box tool, but the corner radius can be specified), then slice the image into 8 pieces - I don't use the blank in the middle, obviously!
I set all my colours and transparency right here, and save the file as a master so I can come back and re-invent the wheel through my own time-warp!!
Then I create a table with 3 columns and 3 rows at the (table) width I desire - I usually use 760 pixels. Each corner cell uses one of the corners from the sliced image, then I insert bottom and top, left and right side images appropriately.
Each side image gets it's actual width specified (40, for example) but 100% on the height, top and bottom get their actual height specified (40 again, for example) but 100% on the width. The sides and top/bottom images stretch to fill the gaps. The only drawback is if you have a textured image frame, then you make the original as long as possible or it tends to look streaked as it stretches.
An alternative is to make the sides and top/bottom a repeating background image, but that;s only necessary if you don't want to stretch the image for some reason.
Then I tailor the dimensions of the cells ringing the middle to the width of the cells and the height of top and bottom, leaving the middle with no dimensions specified.
Make this page the master, then fill with whatever you have... it resizes (vertically) to hold whatever you drop in.
BTW, this process uses the same image set used here with CSS - the frame pieces of a rounded-corner box image - I'm just using an HTML table to draw it all together instead of CSS.
Hope that helps someone...
To make a rounded-corner box I create an image with rounded corners in Photoshop about 200 x 200 pixels with the rounded corners tool (similar to the box tool, but the corner radius can be specified), then slice the image into 8 pieces - I don't use the blank in the middle, obviously!
I set all my colours and transparency right here, and save the file as a master so I can come back and re-invent the wheel through my own time-warp!!
Then I create a table with 3 columns and 3 rows at the (table) width I desire - I usually use 760 pixels. Each corner cell uses one of the corners from the sliced image, then I insert bottom and top, left and right side images appropriately.
Each side image gets it's actual width specified (40, for example) but 100% on the height, top and bottom get their actual height specified (40 again, for example) but 100% on the width. The sides and top/bottom images stretch to fill the gaps. The only drawback is if you have a textured image frame, then you make the original as long as possible or it tends to look streaked as it stretches.
An alternative is to make the sides and top/bottom a repeating background image, but that;s only necessary if you don't want to stretch the image for some reason.
Then I tailor the dimensions of the cells ringing the middle to the width of the cells and the height of top and bottom, leaving the middle with no dimensions specified.
Make this page the master, then fill with whatever you have... it resizes (vertically) to hold whatever you drop in.
BTW, this process uses the same image set used here with CSS - the frame pieces of a rounded-corner box image - I'm just using an HTML table to draw it all together instead of CSS.
Hope that helps someone...
tedd Saturday, December 12, 2009 08:38
JimL:
One of the main "rules" in css is not to use tables for anything other than column data. You are violating that rule and there is no reason for doing so.
Using div's as I have done here is easy to understand and implement -- plus it resizes both vertically and horizontally to hold what ever you drop in.
Instead of adding a table, it's far better to use simple div's to accomplish this effect.
Cheers,
tedd
One of the main "rules" in css is not to use tables for anything other than column data. You are violating that rule and there is no reason for doing so.
Using div's as I have done here is easy to understand and implement -- plus it resizes both vertically and horizontally to hold what ever you drop in.
Instead of adding a table, it's far better to use simple div's to accomplish this effect.
Cheers,
tedd
Govinda
Tuesday, December 15, 2009 16:04
busy here now.. so let me just say the minimum-
Brilliant!
Thank You very much Tedd.
:-)
-Govinda
Brilliant!
Thank You very much Tedd.
:-)
-Govinda
astaga.com lifestyle on the net
Thursday, December 17, 2009 00:22
May I use this method for my blogger template? it's free template for
anyone not for sale but I will accept donation and sponsor in the footer
for each template.
tedd Friday, December 18, 2009 10:13
Thank you for asking.
You may use this technique for anything you want without any obligation to me whatsoever. If you want to donate to help with site expense, please use tedd@sperling.com via PayPal.com. If you want to provide a link to my site, that would be good as well. However, there is no obligation to do either.
Enjoy,
tedd
You may use this technique for anything you want without any obligation to me whatsoever. If you want to donate to help with site expense, please use tedd@sperling.com via PayPal.com. If you want to provide a link to my site, that would be good as well. However, there is no obligation to do either.
Enjoy,
tedd
reggi
Saturday, January 9, 2010 10:35
Did you test this in IE6? It seems to broken be in IE6, but perfect in all
other browsers.
www.heartofyourhome.ca
www.heartofyourhome.ca
tedd Monday, January 18, 2010 08:22
Reggi:
Of course I've tested this technique with IE 6 and it is not broken. This technique works for all modern browsers, and I am being very kind to IE6.
Have you validated your code for www.heartofyourhome.ca? If you had you would have found 14 errors and 3 warnings -- that's a lot!
Please understand that you can't take my code and wrap it in bad code and expect everything to work. You see, when you send bad code to a browser, you can't predict how that browser will react.
Always validate your code through the W3C (i.e., validator.w3.org).
tedd
Of course I've tested this technique with IE 6 and it is not broken. This technique works for all modern browsers, and I am being very kind to IE6.
Have you validated your code for www.heartofyourhome.ca? If you had you would have found 14 errors and 3 warnings -- that's a lot!
Please understand that you can't take my code and wrap it in bad code and expect everything to work. You see, when you send bad code to a browser, you can't predict how that browser will react.
Always validate your code through the W3C (i.e., validator.w3.org).
tedd
Jonathan
Wednesday, January 27, 2010 10:52
Hey Tedd,
This is by far the easiest, most flexible, and most robust round box solution I have found (and I have done quite a bit of searching). Just so you know, this is the code we are using on all 200+ CSN Stores (albeit with slightly different images). This was the first round box we tried, and after trying 3 other options we came back to your implementation. It worked right out of the box and as advertised.
Just wanted to say thanks.
-Jonathan
This is by far the easiest, most flexible, and most robust round box solution I have found (and I have done quite a bit of searching). Just so you know, this is the code we are using on all 200+ CSN Stores (albeit with slightly different images). This was the first round box we tried, and after trying 3 other options we came back to your implementation. It worked right out of the box and as advertised.
Just wanted to say thanks.
-Jonathan
M Wham
Saturday, February 6, 2010 08:40
Hi Tedd,
I've been looking for an efficient method of making expandable rounded corner boxes for quite a while. After about 20 previous tests, I can finally stop looking.
IMHO, your method is definitely the most flexible and browser friendly for now. I may re-visit the concept after CSS3 matures.
I've used your method (with minor mods) and have great results with W3C, both in CSS Level2 and XHTML 1.0 Strict.
My Mods:
1. I normally change the divs from class to id in order to get repeatable usage of the frames throughout the page.
2. I "@import" your box script from my main CSS so I can keep a modular design technique.
3. I use conditional statements in my HTML to make IE happy and still maintain W3C validation.
4. I sometimes use more than 1 "box style" in the same page by cloning the CSS as "box2, etc".
I've learned a lot of cool tricks from your articles and appreciate your intellectual generosity.
And, of course, have given you accreditation for your efforts in the sample I use.
M Wham
WhamWeb.com
I've been looking for an efficient method of making expandable rounded corner boxes for quite a while. After about 20 previous tests, I can finally stop looking.
IMHO, your method is definitely the most flexible and browser friendly for now. I may re-visit the concept after CSS3 matures.
I've used your method (with minor mods) and have great results with W3C, both in CSS Level2 and XHTML 1.0 Strict.
My Mods:
1. I normally change the divs from class to id in order to get repeatable usage of the frames throughout the page.
2. I "@import" your box script from my main CSS so I can keep a modular design technique.
3. I use conditional statements in my HTML to make IE happy and still maintain W3C validation.
4. I sometimes use more than 1 "box style" in the same page by cloning the CSS as "box2, etc".
I've learned a lot of cool tricks from your articles and appreciate your intellectual generosity.
And, of course, have given you accreditation for your efforts in the sample I use.
M Wham
WhamWeb.com
JJ
Wednesday, February 10, 2010 20:08
Does anyone know how I could use this method to put a smaller rounded box
inside a bigger rounded box? Thanks.
Gilly
Tuesday, February 23, 2010 09:31
Hi Tedd
I have been looking at the rounded corner box, I have created my own graphics but have found it near impossible to line up the different components? I guess I have have missed something out but not sure what it is. It is in the graphics stage that I am going wrong, am using photoshop but would it be easier in fireworks?
Regards
Gilly
I have been looking at the rounded corner box, I have created my own graphics but have found it near impossible to line up the different components? I guess I have have missed something out but not sure what it is. It is in the graphics stage that I am going wrong, am using photoshop but would it be easier in fireworks?
Regards
Gilly
tedd Thursday, March 11, 2010 08:58
Gilly:
The graphics can be tricky. It shouldn't make any difference what application you use.
I would suggest that you take the graphics I provided and look at them up-close and then try to change them to whatever colors you want while leaving the "edge" in the same place.
Once you see how the 8 graphics are used, then you'll have a better handle on how to roll-your-own.
Cheers,
tedd
The graphics can be tricky. It shouldn't make any difference what application you use.
I would suggest that you take the graphics I provided and look at them up-close and then try to change them to whatever colors you want while leaving the "edge" in the same place.
Once you see how the 8 graphics are used, then you'll have a better handle on how to roll-your-own.
Cheers,
tedd
tom
Thursday, April 8, 2010 11:46
Hello Ted,
Until CSS3, your simple-box for rounded/shadow div using 8-files is the best (most flexible) solution I have tried.
What is purpose of lines #2 through #6 in your CSS file above? It works fine without them. Thanks for sharing so many excellent examples.
Tom
Until CSS3, your simple-box for rounded/shadow div using 8-files is the best (most flexible) solution I have tried.
What is purpose of lines #2 through #6 in your CSS file above? It works fine without them. Thanks for sharing so many excellent examples.
Tom
Jonathan
Thursday, April 29, 2010 04:01
Hi Ted,
I was wondering if there is any way to have the border not be white but transparant, when I change the image it does not work due to the repeating pattern.
Any ideas?
Thanks,
JB
I was wondering if there is any way to have the border not be white but transparant, when I change the image it does not work due to the repeating pattern.
Any ideas?
Thanks,
JB
QUIKI
Monday, May 31, 2010 06:46
Hi!
Your example is great and simple thank you very much for this.
I have on little problem.
How can I change height? I know it changes hight automaticly with the content, but if I want the size to be the same all the time?
Your example is great and simple thank you very much for this.
I have on little problem.
How can I change height? I know it changes hight automaticly with the content, but if I want the size to be the same all the time?
QUIKI
Monday, May 31, 2010 07:04
Hi!
Thank you very much for simple and great round boxes.
I have one problem. I want to make height 100px but as I know the height is set automaticly depending on content. How can I make stable height?
Thank you very much for simple and great round boxes.
I have one problem. I want to make height 100px but as I know the height is set automaticly depending on content. How can I make stable height?
QUIKI
Tuesday, June 1, 2010 05:27
Hi!
First I want to thank you for this example. Its very easy to understand and to use.
I have one question though. How can I change the height of the box?
I know the box changes height automaticly with the content, but if I want the box to be same height all the time?
First I want to thank you for this example. Its very easy to understand and to use.
I have one question though. How can I change the height of the box?
I know the box changes height automaticly with the content, but if I want the box to be same height all the time?
pattaya
Thursday, July 15, 2010 04:31
Thank! it good share
John
Monday, July 26, 2010 13:35
Really interesting approached! I like it a lot! I was over complicating
things by abs positions the corners and have 8 separate divs within a
wrapper and it just got messing, and when I wanted to add padding IE look
out! Shit hit the fan. I was also defining the width and height of each
corner explicitly in my css. Anywho, really like this and I only have one
suggestion. I renamed all of my divs to compass coordinates, for me at
least N-E-W-S-NE-NW-SE-SW are a little more readable. But that's just me.
Oh, and little problem, I can't seem to get this to work in
Julia
Wednesday, August 4, 2010 10:22
Thank you! You safe my time, crystal clear and useful; I've used this for
my job
Denis
Wednesday, December 29, 2010 13:19
I have added the css file called style into my site and typed the
"files/style.css" into my header. I then added the code mentioned above
and for some reason the box (rectangle) is all that pops up! I also added
the gif files into my site and made sure that they are in my "images"
folder as was used in this example. Why doesn't this work for me? I am
going to pull my hair out!
Denis
Wednesday, December 29, 2010 13:26
I forgot to mention one very important thing on the previous post. What is
not working for me are the corners and sides to make it round and look 3d
(with shadow). As you can see I'm a beginner.
Bud
Monday, January 3, 2011 22:15
Hi Tedd, I have read almost all of the comments and hope I did not miss one
that would help me do as I would like.I want to use three boxes-two smaller
outside boxes with a larger inside box to give me a total of three
boxes.Each will be a rather long box in tength but all need to be a fixed
size n width that will accomodate images and text in them.Would it be
possible to use three style sheets or do I need to do this with div class
names or something along this line?I am trying to learn css and make it so
each browser will be ok with my coding/script.Thanks in advance for looking
here and helping me.
tedd Friday, January 7, 2011 12:03
Bud:
My apologies for not responding to your post. You see, my site receives literally hundreds of spam posing per day. I can't address all of the postings. In fact, I am going to remove the option from my site all together.
There are several ways to do what you want.
First, the outside box should remain as "id'=" in the HTML but the inside boxes should be changed to classes (i.e., class=) with a corresponding change in the css.
Second, the inside boxes must have to have different positions. You might consider doing absolute position of both via css OR float one of the boxes. The border classes should be named differently, such as class="r-lb" (right-box bottom left) and class="l_bl" (left-box bottom left).
Grnted this is a bit of programming and you'll have to play around with itto get it to work, but that's the way I would do it IF I was so inclined.
HTH's
tedd
My apologies for not responding to your post. You see, my site receives literally hundreds of spam posing per day. I can't address all of the postings. In fact, I am going to remove the option from my site all together.
There are several ways to do what you want.
First, the outside box should remain as "id'=" in the HTML but the inside boxes should be changed to classes (i.e., class=) with a corresponding change in the css.
Second, the inside boxes must have to have different positions. You might consider doing absolute position of both via css OR float one of the boxes. The border classes should be named differently, such as class="r-lb" (right-box bottom left) and class="l_bl" (left-box bottom left).
Grnted this is a bit of programming and you'll have to play around with itto get it to work, but that's the way I would do it IF I was so inclined.
HTH's
tedd
akiel george
Thursday, January 13, 2011 15:08
this looks great but I dont know how to use it I dont know what to paste
where I really need help, im using dreamweaver, in code view I really need
help I pasted the html but i dont know where to put the gifs or the css
code please help me.
Peter
Monday, January 31, 2011 05:14
Hi Tedd
Thanks for sharing this great work. I picked up a bug in IE8. When zooming at 75%, 125%, 175%, etc a 1px line appears next to the right border. When replacing your images with my own images, it looks a lot worse due to the contrast in colors. I have been struggling for 2 months trying to get rounded corners to work. This is my first website ever and I am under a lot of presuure to make this work. Please help.
Thanks,
Peter
Thanks for sharing this great work. I picked up a bug in IE8. When zooming at 75%, 125%, 175%, etc a 1px line appears next to the right border. When replacing your images with my own images, it looks a lot worse due to the contrast in colors. I have been struggling for 2 months trying to get rounded corners to work. This is my first website ever and I am under a lot of presuure to make this work. Please help.
Thanks,
Peter
Peter
Thursday, February 3, 2011 06:17
Hi Tedd
I am new to CSS and just wondering: Why is background-position: 50% 100% for #bb? Why 50%?
Thanks in advance,
Peter
I am new to CSS and just wondering: Why is background-position: 50% 100% for #bb? Why 50%?
Thanks in advance,
Peter
Diego
Wednesday, February 23, 2011 22:24
Hi... Even 3 years after you posted this it is very useful.
I am using in my site with just a few little modifications, like the top margin and the padding, to fit the content better. Thanks.
I am using in my site with just a few little modifications, like the top margin and the padding, to fit the content better. Thanks.
Ferge Billett
Friday, March 18, 2011 04:14
Gonna look into this, thanks :-)
Great website you have. Plenty of tips and tricks :-)
Great website you have. Plenty of tips and tricks :-)
Suzanne Chartier
Saturday, April 30, 2011 17:22
Fantastic and easy. I have been struggling to learn CSS and to get a few
very basic designs like this available for customisation and this is by far
the easiest and most versatile. I can think of so many uses already.
Thanks again
'H'
Monday, May 9, 2011 16:46
Just what I needed when I wanted it !! Good Job!!
I've looked at a couple of the comments above and if I may ............
1.Yes, it does work with Firefox;
2. If you want to change any of the colours just change the html - easy as that;
3. Like tedd, I created a separate css style sheet and stuffed everything in there;
4. Don't know what all the negative waves are about and you have exactly the right attitude - it's code for a box: if you want it to stand on its head or disembowel itself write the code yourself.
Keep up the good work!
I've looked at a couple of the comments above and if I may ............
1.Yes, it does work with Firefox;
2. If you want to change any of the colours just change the html - easy as that;
3. Like tedd, I created a separate css style sheet and stuffed everything in there;
4. Don't know what all the negative waves are about and you have exactly the right attitude - it's code for a box: if you want it to stand on its head or disembowel itself write the code yourself.
Keep up the good work!
ndree
Tuesday, May 10, 2011 21:04
Tedd,
Just having the same prob like Sasq.
I'm changing the gif to PNG with alpha transparency (i use my own roundcorner, just a very thin line, and i'm guessing the top, left, right and bottom border seemed to be overlapping with the round corner images, since it's having its transparency (alpha).
any way to handle this? though changing the corner to non transparency could fix the problem with overlapping, but still that boxed white non transparency when changing the background to some other color, e.g; blue.
anyway thanks for sharing!
Just having the same prob like Sasq.
I'm changing the gif to PNG with alpha transparency (i use my own roundcorner, just a very thin line, and i'm guessing the top, left, right and bottom border seemed to be overlapping with the round corner images, since it's having its transparency (alpha).
any way to handle this? though changing the corner to non transparency could fix the problem with overlapping, but still that boxed white non transparency when changing the background to some other color, e.g; blue.
anyway thanks for sharing!
"Post a Comment" has been deactivated.
I'm sorry, but there is just too much spam to review to provide answers. For example, for every honest question, there are over 1000 spams. I am leaving the comments here so that they may help others.
I find my time better spent providing more examples and attending to clients.
tedd