Border for the body content CSS, HTML

Question

I struggle in making border for body content in HTML. I used:

-moz-border-image: url(/images/border.png) 20 repeat;
 -webkit-border-image: url(/images/border.png) 20 repeat;
 -o-border-image: url(/images/border.png) 20 repeat;
 border-image: url(/images/border.png) 20 repeat; 
 behavior: url(/css/PIE.htc);

...but because it is not working in explorer and even older versions of some other browsers, I have decided to come to old way of making it. However, I am not sure how to do that. We used have table in our old webpage like that:



    
        

        
        
        
        

        
    
    
        

        
        


..but now I created page with div and HTML5. Can anybody give idea how to implement new borders around content. We have 8 pictures of borders - top left, top line, top right, right line, bottom right, bottom line, bottom left and left line. I know it is possible to do it with div, however I don't find any tutorial how to do that. Waiting for any help :) If you need pictures of the borders, write me and I will upload it

artlung · Accepted Answer

So you want to do it the "old-fashioned way" eh, because border-image is bumming you out due to lack of support? Well, here's the old fashioned way, more or less:

And CSS:

So on the table itself, we want our border images to align perfectly with each other, that's why we need cellspacing="0" cellpadding="0" border="0" -- you could probably get away with making sure padding is 0 and border-collapse is set to collapse these days. This kind of table can be as stretchy as you need it to be - it can go full width or be as narrow as (in this example) 60 pixels. Just remember that the width attribute doesn't take "px" as part of the value. So 100% is 100%, but 60px is just 60.

In our middle column we set width="100%" for each to assure that that last column doesn't accidentally get too wide, we're forcing things to stay the right width - that's why we also use blank gifs for the cells so we can see to the background and get the right size. In some cases we might use for this, but those can be unpredictable in size - if you wanted these borders to be only 2 pixels tall, that gets dicey. For a while people were using the actual Netscape tag, but that never worked very well.

The align="left" and align="right" are in there out of habit, really. If instead of using blank gifs in the left and right tags, you used your actual images, well, you could do that.

In this example I'm actually applying the backgrounds using CSS, which, well, I can't think of a browser made in the last 10 years that would not understand this, and it's slightly easier to maintain. I never liked using the background attribute, and I bet someday in the future some browsers will eliminate support for it (if they haven't already). This solution looks backward, and forward, in that way. I did a lot of this kind of markup back in the day.

Typically when we did borders like this we'd also include a background color that matched the border somewhat - we'd do that with the bgcolor attribute, which you can put on the to specify once, or on the whole table, then override in the cells where you need to. Less markup is always better for this, otherwise you get pretty good with search and replace in your document. The examples from the old Disneyland site unfortunately are not available to me, but http://web.archive.org/web/19980709083315/http://namco.com/ has lot of using tables and spacer gifs to, uh, inspire you.

Border for the body content CSS, HTML

Answers (2)

Related Questions