Collapsing borders without using tables 1

[BillyRayPreachersSon]

I'd like to be able to collapse borders on adjacent elements without having to resort to using tables, and without having multiple styles.

At the moment, I have:

<STYLE TYPE=&quot;text/css&quot;>
.myItem
{
	border-top: solid #CC3300 1px;
	border-bottom: solid #CC3300 1px;
	border-left: solid #CC3300 1px;
}
.myLastItem
{
	border: solid #CC3300 1px;
}
</STYLE>

...

<DIV>
	<SPAN CLASS=&quot;myItem&quot;>abc</SPAN>
	<SPAN CLASS=&quot;myItem&quot;>def</SPAN>
	<SPAN CLASS=&quot;myLastItem&quot;>ghi</SPAN>
</DIV>[code]

Which works fine.

However, I want to be able to dispense with having 2 classes, so I could just have:

[code]<STYLE TYPE=&quot;text/css&quot;>
.myItem
{
	border: solid #CC3300 1px;
}

However, this doubles up the adjacent borders.

I've tried using the

border-collapse: collapse;

CSS, but AFAIK, this only seems to works within tables, which I do not want to use.

Is there any way I can achieve this, or am I stuck with my 2-class (but not 2nd-class!) solution until browsers get more CSS support for tabular layouts?

Dan

 

[Vragabond]

There's a clever solution. So clever in fact, that it only works in clever browsers. Mozilla and Opera 1, IE 0. Other than that, I don't know:

.myItem
{
    border: solid #CC3300 1px;
    margin-right: -1px;
}

 

[BillyRayPreachersSon]

Yeah - I had to play about with margins and padding for my solution to work corectly in IE for the Mac, too... and it still doesn't look 100% in that ;o(...

The solution you gave lops off the very right-hand border in IE/Win, certainly. Whatever the solution, it has to look good in IE - even for all its flaws, it still holds the top spot for browser usage.

I don't really want to go to the lengths of using CSS hacks (@ import, rules etc) to have different code for different browsers. What I have at the moment (the main menu bar on

http://www.soterm.com/

) looks fine in all browsers except IE/Mac, as far as I know, but I was just hoping to get rid of one of those extra classes.

Guess I'm outta luck on that front ;o(

Thanks anyway!

Dan

 

[Vragabond]

I'm clever some more. Two classes, but you do have two elements, so no problem there:

.myItem
{
    border-left: solid #CC3300 1px;
}
.myContainer
{
    border-top: solid #CC3300 1px;
    border-bottom: solid #CC3300 1px;
    border-right: solid #CC3300 1px;
}

</style>

<span class=&quot;myContainer&quot;>
 <span class=&quot;myItem&quot;>abc</span><span class=&quot;myItem&quot;>def</span><span class=&quot;myItem&quot;>ghi</span>
</span>

 

[BillyRayPreachersSon]

That seems to work fine in all browsers, including IE 5/Mac. Just a shame that the Mac has other rendering issues, but that's probably a buggy app, rather than buggy CSS ;o)

Don't know why I didn't think of that solution!

Many thanks,

Dan