Copy & paste the code below to embed this comment.
anon
I can select any line or paragraph of text, but I can’t seem to select, say, the title (“Middle”) and the paragraph below it. Is there a way around this? Is this a browser bug?
A stretch/extend keyword would be infinitely useful in CSS. Would make this and other techniques so much easier, and we’d get far more out of our bitmaps…
Copy & paste the code below to embed this comment.
Phoat Spyro
As always, thanks for the great article. I have a question, or could be a suggestion for part III of this series…
Is it possible to have a gradient INSIDE the content box, instead of just an all white background and have it be vertically fluid without breaking the gradient?
Copy & paste the code below to embed this comment.
Sage
The one problem with this technique is that you have to make the top-left image almost ridiculously long, and even then it’s not always long enough (especially with text-resizing). Has anybody come up with a way that doesn’t require that?
By the way, I’m very much aware of the technique where you have header and footer images, then vertically tile the content background, but that only works when the width of the box is fixed, not when it’s a relative value.
I’ve created another testcase, to fix my previous technique with long containers, using only 2 images:
http://phoenity.com/tests/custom_corners_three.html
rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).
Yes, it is quite elementary when only worrying about fixed-width divs, however the end product of this article creates a 100% width design, with divs that vary in width depending on resolution.
Good article by the way – I am also (somebody else mentioned it on here) wondering about the best way to have a nice gradient as a background image across different resolutions … I can’t quite get my head around it. ;)
yeah, I forgot that…gee, I feel stupid. Anyway, I’ll start looking into ways to get gradients to work. I imagine it will take some crafty background hacks and tricks.
Copy & paste the code below to embed this comment.
Marcel
I love this approach but I can’t see myself use it for professional websites, yet. It doesn’t seem to be very reliable to me, when these bugs in IE get fixed (ok.. if ;)) I don’t want to re-do all websites I made.
What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?
Those 2 Articles have changed my life as a webdesigner a bit (well, in fact, ALA did). Those approaches to rounded corners are fine, still I developed another one to circumvent the inconvenience of either a giant topleft-image, and/or a box whose size is restricted to the background-images size.
As was mentioned here before, this forces me to expand the structure to 10 elements (a container box, a left, middle and right box for the top, center, and bottom part), plus the inner markup.
Although not so elegant in matters of markup and semantic, I now have real fluid boxes which can expand right up to mars. And transparency and dropshadows for png-supporting browsers…
To find back to easy-to-understand markup, I throw the whole box-stuff into a little script, thus all I have to do is give my container an ID and invoke the script who will do the rest.
(see it under development under www.d-ing.net – following pages)
well, that shouldn’t be too hard – just create the borders / corners with the transpareny inside nad the main container with the (must be huge) gradient…
“What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?”
Using CSS for layout doesn’t mean you have to use CSS hacks. As a matter of fact, I didn’t really see any hacks in the code shown in the article; it all seemed like sound CSS for the most part.
I’ve put up a page with details about the holes showing up in IE at http://www.sonnd.com/ala/
I didn’t get around to fixing it, but it shows what the problem is with IE.
For whatever is worth, I find the problem to be small enough to be ignored, for this particular case. I’ve found other situations where the peekaboo bug does indeed hide relevant content.
Having said all that, maybe it’s not the peekaboo bug that we are seeing here (or not only) ;)
By the way, just in case I forgot to mention it before, great article!
if you resize text while viewing the html version of the sample (http://www.alistapart.com/d/customcorners2/step2.4.html) it breaks (or at least in safari 1.2).
Well; again – it doesn’t really “break”. It’s the same as viewing these examples at very large resolutions; the back-images used aren’t big enough.
So – if you want to make sure that it will not “break” (meaning that the images gets too small when viewers enlarge the specified font-size) ; make the background-images bigger.
In the case of text-resizing; it’s the background-image placed bottom right that you would make higher than the one used in the article.
Good, it’s fluid, round of applause? No it’s not infinate flexible as you say
Yes – the center-column at the specified font-size in step 5 has “infinite” length. Like I wrote – if you want to make sure that the fonts don’t overflow the background-images; make them bigger. I never ever wrote, nor said or meant, that this is infinite flexible in every direction.
I have to ask – how much are you increasing font-size?
Copy & paste the code below to embed this comment.
LazyJim
first of all, sorry I forgot to say ‘good work’, it’s just that personally, after I first read about using multiple backgrounds to make expanding tabs, any extension of that seemed obvious and I didn’t see the point in this extension article – but I was wrong it’s a good educational story.
I thought you (may have been someone else) posted that the fluid-ness went on when it’s actually pretty easy to break.
I’m on 1280 by 1024 @ 115dpi.
IE6: breaks with just one text-size notch up.
FireFox8: breaks with 2 whole notches.
To use this technique you have to consider the effect of width on the height (when text re-flows to take more lines), in addition to screen resolutions and text-size.
I think there must be a way using thin corner and side images and a repeat bg middle behind the content.
Multiple background images on each element has been on my CSS wish list for ages.
Oh and sorry again for the hasty sarcastic remark!
Copy & paste the code below to embed this comment.
LazyJim
And on the subject of multiple borders on a single element, I thought about trying to emulate this using CSS dynamically added content…
The aim for maintenance purposes is to just have one element in the HTML, and add the multiple nested elements with the CSS content: ; property applied to style rules involving the ::before and ::after pseudo selectors.
This could also be used to surround elements in other border yielding markup, but as the resulting document will actually have the extra elements in the document, it is not as good as having multiple backgrounds on a single element, or the CSS3 border-image stuff. As my idea, (if it works) has no extra markup in the HTML file, it has one important advantage – to change the technique or remove it in the future only requires changing the CSS!
It is with great trepidation that I dare post anything…
I’m incorporating more and more css in to my sites, but am still using gasp tables (mainly out of impatience). I’ve cribbed two techniques from ALA for this site’s redesign www.coffeeshopofhorrors.com and am thinking that I might be in over my head. I’ve already had to float the Suckerfish-ish drop downs right instead of left to get them to center more accurately (I don’t know why this seems to work better) and am noticing that my one-image corner div behaves strangely in IE Mac. Perhaps I’m just to green to get it.
test page is here:
www.westafer.com/b/csoh/csohNav1.html
I have some troubles with the rounded corner in firefox. Somehow i can’t see the bottom-right corner.
When using IE the corner does show but then i see the ‘peekaboo gap’. When i try to use the trick shown in the post made by Jose Fandos (http://www.sonnd.com/ala)the links in my footer won’t work anymore.
Can anyone tell me what i’m doing wrong?
my site is: http://mattijs.thq.nl/pivot/
and it’s dutch but that won’t matter i think.
There is a gap in the background of the middle footer paragraph in Mozilla 1.6 as well. At a normal window size it is a very thin line above the text but if you bring the size down to that of, say, a PDA it becomes a big chunk. Might it be a code problem after all and not a IE bug? Also, when you get down to that sort of viewport resolution, long words can overflow their containers but this is a problem all fluid designers have to deal with.
Thanks for the articles. I have been thinking about de-blocking my designs for some time but haven’t known where to start. Now I do. BTW Don’t try to print anything using Firexxxxfox. It’s a bad joke.
Copy & paste the code below to embed this comment.
Mikael Karon
I’m not entierly sure this works in all browsers/configurations/anything but I sat down and thought about the problem a little bit and came up with a solution that uses one image and four div’s. It’s a combination of image hacking and background techniques. Right now it lives on http://www.originalgangsters.com/box/. If this has been solved the same way before, please tell me.
I’m putting two of these side by side to get a ‘pages in a book effect’. Try as I may, I can’t figure out how to get both ‘pages’ to be the same size and scroll overflow text in a page. Any insights would be largely appreciated. TY
This doesn’t seem to take into account a large display size. My 1600×1200 monitor shows a gap between the end of the top left image and the right borders. Perhapse just making that image bigger would help, but I don’t think that’s the best solution.
This solution will definately work, though, for cells with a fixed width.
Im working on this site and Im using this method to create a ouline around tables. It looks great in everything for mac, but IE on PC looks really messed up. Here is the url: http://www.designsequence.net/mead/index.php?id=people . The CSS file is here: http://www.designsequence.net/mead/mead_css.css . Anyone know how to fix this?
56 Reader Comments
Back to the ArticlePete
Can be found here – http://interface-7.net/20040218/
anon
I can select any line or paragraph of text, but I can’t seem to select, say, the title (“Middle”) and the paragraph below it. Is there a way around this? Is this a browser bug?
Chris-RG
A stretch/extend keyword would be infinitely useful in CSS. Would make this and other techniques so much easier, and we’d get far more out of our bitmaps…
Phoat Spyro
As always, thanks for the great article. I have a question, or could be a suggestion for part III of this series…
Is it possible to have a gradient INSIDE the content box, instead of just an all white background and have it be vertically fluid without breaking the gradient?
Sage
The one problem with this technique is that you have to make the top-left image almost ridiculously long, and even then it’s not always long enough (especially with text-resizing). Has anybody come up with a way that doesn’t require that?
By the way, I’m very much aware of the technique where you have header and footer images, then vertically tile the content background, but that only works when the width of the box is fixed, not when it’s a relative value.
Lim Chee Aun
I’ve created another testcase, to fix my previous technique with long containers, using only 2 images:
http://phoenity.com/tests/custom_corners_three.html
rgw
http://www.cubedonline.com/newdesign/index.html
rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).
thomas
rounded effect done with two images (one with the headers; the other with a bottom aligned image in the container div).
Yes, it is quite elementary when only worrying about fixed-width divs, however the end product of this article creates a 100% width design, with divs that vary in width depending on resolution.
Good article by the way – I am also (somebody else mentioned it on here) wondering about the best way to have a nice gradient as a background image across different resolutions … I can’t quite get my head around it. ;)
rgw
yeah, I forgot that…gee, I feel stupid. Anyway, I’ll start looking into ways to get gradients to work. I imagine it will take some crafty background hacks and tricks.
rgw
your site is beautiful (saw it via cssvault.com)
Marcel
I love this approach but I can’t see myself use it for professional websites, yet. It doesn’t seem to be very reliable to me, when these bugs in IE get fixed (ok.. if ;)) I don’t want to re-do all websites I made.
What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?
david
Those 2 Articles have changed my life as a webdesigner a bit (well, in fact, ALA did). Those approaches to rounded corners are fine, still I developed another one to circumvent the inconvenience of either a giant topleft-image, and/or a box whose size is restricted to the background-images size.
As was mentioned here before, this forces me to expand the structure to 10 elements (a container box, a left, middle and right box for the top, center, and bottom part), plus the inner markup.
Although not so elegant in matters of markup and semantic, I now have real fluid boxes which can expand right up to mars. And transparency and dropshadows for png-supporting browsers…
To find back to easy-to-understand markup, I throw the whole box-stuff into a little script, thus all I have to do is give my container an ID and invoke the script who will do the rest.
(see it under development under www.d-ing.net – following pages)
d. )
david
well, that shouldn’t be too hard – just create the borders / corners with the transpareny inside nad the main container with the (must be huge) gradient…
d. )
chris e boy
Soren:
“And by the way – how dare you accuse me of using tables for this? (throws glove!)
;)”
Oops! I dont know why i said that. Just goes to show that 10:47am is far too early to be picking holes in people’s code :/
of course i meant div… i’ll be using this article in the near future (probably in a fixed width kinda way), cheers Soren!
Brian
Noticed this in div.Article h2
I noticed that in ie (where else?) that without this line, the top of the image is clipped. Doesn’t show up in firefox (haven’t tested more).
Tried replaceing the images with borders, and without the font-size, the top of the border doesn’t show. Has anyone else seen this?
Also setting the height of div.Article h2 to 1.3em does the trick.
Vinnie Garcia
“What is the general idea on this anyway? Do all of you hardcore CSS people only use CSS and their hacks to create new websites, or do you simply work with tables because they.. well.. work?”
Using CSS for layout doesn’t mean you have to use CSS hacks. As a matter of fact, I didn’t really see any hacks in the code shown in the article; it all seemed like sound CSS for the most part.
Jose Fandos
I’ve put up a page with details about the holes showing up in IE at http://www.sonnd.com/ala/
I didn’t get around to fixing it, but it shows what the problem is with IE.
For whatever is worth, I find the problem to be small enough to be ignored, for this particular case. I’ve found other situations where the peekaboo bug does indeed hide relevant content.
Having said all that, maybe it’s not the peekaboo bug that we are seeing here (or not only) ;)
By the way, just in case I forgot to mention it before, great article!
scott allison
if you resize text while viewing the html version of the sample (http://www.alistapart.com/d/customcorners2/step2.4.html) it breaks (or at least in safari 1.2).
scott allison
so yeah, other people have noticed that, too.
Søren Madsen
Well; again – it doesn’t really “break”. It’s the same as viewing these examples at very large resolutions; the back-images used aren’t big enough.
So – if you want to make sure that it will not “break” (meaning that the images gets too small when viewers enlarge the specified font-size) ; make the background-images bigger.
In the case of text-resizing; it’s the background-image placed bottom right that you would make higher than the one used in the article.
LazyJim
Good, it’s fluid, round of applause?
No it’s not infinate flexible as you say, the only truely flexible varient of this common technique is multiple nested <div>s.
Soory if I’m burtsing your bubble, but every time I increse text-size, it bursts anyway!
Søren Madsen
Good, it’s fluid, round of applause? No it’s not infinate flexible as you say
Yes – the center-column at the specified font-size in step 5 has “infinite” length. Like I wrote – if you want to make sure that the fonts don’t overflow the background-images; make them bigger. I never ever wrote, nor said or meant, that this is infinite flexible in every direction.
I have to ask – how much are you increasing font-size?
Oh, and – why the indignation, mate?
LazyJim
first of all, sorry I forgot to say ‘good work’, it’s just that personally, after I first read about using multiple backgrounds to make expanding tabs, any extension of that seemed obvious and I didn’t see the point in this extension article – but I was wrong it’s a good educational story.
I thought you (may have been someone else) posted that the fluid-ness went on when it’s actually pretty easy to break.
I’m on 1280 by 1024 @ 115dpi.
IE6: breaks with just one text-size notch up.
FireFox8: breaks with 2 whole notches.
To use this technique you have to consider the effect of width on the height (when text re-flows to take more lines), in addition to screen resolutions and text-size.
I think there must be a way using thin corner and side images and a repeat bg middle behind the content.
Multiple background images on each element has been on my CSS wish list for ages.
Oh and sorry again for the hasty sarcastic remark!
LazyJim
And on the subject of multiple borders on a single element, I thought about trying to emulate this using CSS dynamically added content…
The aim for maintenance purposes is to just have one element in the HTML, and add the multiple nested elements with the CSS content: ; property applied to style rules involving the ::before and ::after pseudo selectors.
This could also be used to surround elements in other border yielding markup, but as the resulting document will actually have the extra elements in the document, it is not as good as having multiple backgrounds on a single element, or the CSS3 border-image stuff. As my idea, (if it works) has no extra markup in the HTML file, it has one important advantage – to change the technique or remove it in the future only requires changing the CSS!
Benjie
It is with great trepidation that I dare post anything…
I’m incorporating more and more css in to my sites, but am still using gasp tables (mainly out of impatience). I’ve cribbed two techniques from ALA for this site’s redesign www.coffeeshopofhorrors.com and am thinking that I might be in over my head. I’ve already had to float the Suckerfish-ish drop downs right instead of left to get them to center more accurately (I don’t know why this seems to work better) and am noticing that my one-image corner div behaves strangely in IE Mac. Perhaps I’m just to green to get it.
test page is here:
www.westafer.com/b/csoh/csohNav1.html
Any advice is greatly appreciated.
Thanks.
mat
I have some troubles with the rounded corner in firefox. Somehow i can’t see the bottom-right corner.
When using IE the corner does show but then i see the ‘peekaboo gap’. When i try to use the trick shown in the post made by Jose Fandos (http://www.sonnd.com/ala)the links in my footer won’t work anymore.
Can anyone tell me what i’m doing wrong?
my site is: http://mattijs.thq.nl/pivot/
and it’s dutch but that won’t matter i think.
Søren Madsen
You’ve placed the background-images in the wrong CSS selector (for the HTML you’ve got)
Change your .entryfooter class to this:
.entryfooter {
color: #666;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: normal;
text-align:right;
margin: 0px;
padding: 6px 0px;
clear: both;
background: url(http://mattijs.thq.nl/pivot/css/bottomright.gif) bottom right no-repeat;
position: relative;
right: -14px;
padding-right: 1em;
}
Mike W.
There is a gap in the background of the middle footer paragraph in Mozilla 1.6 as well. At a normal window size it is a very thin line above the text but if you bring the size down to that of, say, a PDA it becomes a big chunk. Might it be a code problem after all and not a IE bug? Also, when you get down to that sort of viewport resolution, long words can overflow their containers but this is a problem all fluid designers have to deal with.
Thanks for the articles. I have been thinking about de-blocking my designs for some time but haven’t known where to start. Now I do.
BTW Don’t try to print anything using Firexxxxfox. It’s a bad joke.
Mikael Karon
I’m not entierly sure this works in all browsers/configurations/anything but I sat down and thought about the problem a little bit and came up with a solution that uses one image and four div’s. It’s a combination of image hacking and background techniques. Right now it lives on http://www.originalgangsters.com/box/. If this has been solved the same way before, please tell me.
Ed Murray
I’m putting two of these side by side to get a ‘pages in a book effect’. Try as I may, I can’t figure out how to get both ‘pages’ to be the same size and scroll overflow text in a page. Any insights would be largely appreciated. TY
Trevor
Can you make a custom corner print? isn’t the default in most browser set to print without background colors and images?
Dave
This doesn’t seem to take into account a large display size. My 1600×1200 monitor shows a gap between the end of the top left image and the right borders. Perhapse just making that image bigger would help, but I don’t think that’s the best solution.
This solution will definately work, though, for cells with a fixed width.
Tyler
Im working on this site and Im using this method to create a ouline around tables. It looks great in everything for mac, but IE on PC looks really messed up. Here is the url: http://www.designsequence.net/mead/index.php?id=people . The CSS file is here: http://www.designsequence.net/mead/mead_css.css . Anyone know how to fix this?
Darren Candler
I have noticed that if you add quite abit of text in the Article box then it seem to break at the bottom ????.
Cant See why
chris
its not really that great –
i could work out wether it was a tutorial or not?
could be good to be ‘custom’ border, not rounded
Ain
Just like Dave said it’s fixed and can not be used in case of serious projects where you need to have dynamic width.
Unfortunately adjusting the background size for a particular project is not the solution to go with, it’s a hack.