HTMLHelp Forums > border style

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

ShadowyBob

Oct 6 2006, 05:02 PM

Can anyone please suggest an alternative method of formatting border styles so that styles such as 'outset' will display in other browsers as they do in IE?

Christian J

Oct 6 2006, 05:20 PM

Some of IE6's borders use two bordercolors, while Firefox and Opera only use one. Here's a way to simulate it by using a second DIV element:

CODE

.o, .i {
border: 2px solid;
}
.o {
padding: 0;
border-color: #E0DFE3 #716F64 #716F64 #E0DFE3;
}

.i {
margin: 0;
border-color: #fff #9D9DA1 #9D9DA1 #fff;
}

<div class="o">
<div class="i">
foo
</div>
</div>

You can get IE6's inset, ridge and groove borders by combining two border-colors in different ways.

ShadowyBob

Oct 6 2006, 05:26 PM

Many thanks for your rapid response, Christian J.

I'll go away and play and if I don't return, many thanks for the advice!

ShadowyBob

Oct 18 2006, 07:37 PM

Christian JI know I said I wouldn't be back if it worked, but I just had to say thanks - with a little adjustment it worked like a dream.

I've just got to get my head round the principle that I can get more than one border round a cell - maybe 3 or more??

Christian J

Oct 19 2006, 06:34 AM

QUOTE(ShadowyBob @ Oct 19 2006, 02:37 AM)

Christian JI know I said I wouldn't be back if it worked, but I just had to say thanks - with a little adjustment it worked like a dream.

You're welcome!

QUOTE

I've just got to get my head round the principle that I can get more than one border round a cell - maybe 3 or more??

I guess you can use as many as you like, if you can stand the HTML bloat...

I tried simulating IE's "outset" border-style by using existing HTML table elements and CSS:

CODE

td {
color: #000;
background: #fff url(td_bg.gif) no-repeat bottom right;
padding: 4px 2px 2px 4px;
border: 2px solid;
border-color: #E0DFE3 #716F64 #716F64 #E0DFE3;
}

The image "td_bg.gif" is for the inner bottom/right border, and looks like a large mirror-image L with transparent background and 2px thick, #9D9DA1 border. This worked pretty well for "outset" since that border-style uses a white top/left inner border (which means you can skip it), but the top/right and bottom/left corner joints are not diagonal like in the real thing.

You can probably do something even better in newer browsers with generated content, such as generating an image for the top/left borders too in addition to the TD background-image above.

ShadowyBob

Oct 19 2006, 06:44 PM

ChristianJ, sorry, I was premature with my enthusiasm. My borders were only 1px in width and I had thought I had cracked it with the following adaptation of your css:

CODE

.o, .i { border: 1px solid; }
.o { padding: 0; border-color: #909090 #606060 #606060 #909090; }
.i { margin: 0; border-color: #C0C0C0 #303030 #303030 #C0C0C0; }

followed in the body with

CODE

and removed all reference to 'outset' from the 'td' in the css declaration.

It looked good, but then I wasn't so sure, so I 'blew up' the borders by increasing their width to 4px to compare it with the IE outset.

It looks as if my adaptation didn't work after all. :-(

As it happens I'm fairly ok with the outcome, but now that I've started I would like to experiment a bit more.

As I only want the 'outset' effect on the cells and not the table itself, I guess the <div> effect won't work here. An obvious (to me) method might be to nest cells within cells, but then I would agree with you about an html bloat. Looks as if I'll have to experiment with your image inclusion (although that does feel a bit like cheating!).

Christian J

Oct 20 2006, 06:22 AM

QUOTE(ShadowyBob @ Oct 20 2006, 01:44 AM)

ChristianJ, sorry, I was premature with my enthusiasm. My borders were only 1px in width and I had thought I had cracked it with the following adaptation of your css:

CODE

.o, .i { border: 1px solid; }
.o { padding: 0; border-color: #909090 #606060 #606060 #909090; }
.i { margin: 0; border-color: #C0C0C0 #303030 #303030 #C0C0C0; }

followed in the body with

CODE

Above you apply both .o and .i on the same TD element, which means the .i values will overrride .o's. If you shorten the above CSS you'd get

CODE

td {
border: 1px solid;
padding: 0;
margin: 0;
border-color: #C0C0C0 #303030 #303030 #C0C0C0;
}

in other words just a single border. The idea was that .o would apply to an outer element in order to get double colors.

QUOTE

As I only want the 'outset' effect on the cells and not the table itself, I guess the <div> effect won't work here. An obvious (to me) method might be to nest cells within cells, but then I would agree with you about an html bloat.

You can't nest a TD directly inside a TD, but you can put a DIV in a TD.

CODE

You may have to check that the DIV heights expand along with the TD, otherwise the effect is ruined. This might happen if there are more text lines in some cells than others, e.g. because the user increased text size and made the content wrap.

ShadowyBob

Oct 20 2006, 02:06 PM

QUOTE

The idea was that .o would apply to an outer element in order to get double colors.

That's where I missed the point and got excited about the thought that you could apply more than one set of borders to a cell!

OK, now that I see that you can be more adventurous with <div>'s, I tried

CODE

to try and avoid the DIV height problem, but it seemed not to work. Any thoughts?

Frederiek

Oct 20 2006, 03:02 PM

Put the DIV inside the TD. Reverse the classes, if needed.

ShadowyBob

Oct 20 2006, 04:28 PM

Sorry,

forgot my DIV rules!

But now I'm flying!!

And notice - the corner bevels are fine and it all stretches fine when the text is expanded by the user!

Many thanks pandy and Frederiek.

Christian J

Oct 20 2006, 05:52 PM

QUOTE(ShadowyBob @ Oct 20 2006, 11:28 PM)

Many thanks pandy

Outrageous!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.