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 ArticleLazyJim
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.