Right and left borders not working

[Greven]

For whatever reason, on the top nav bar( BTW, this only looks right in IE, but it will be the only browser looking at it) the left border in the .Tabs style does not seem to show up. If I increase left to 2px, it shows up but overrides right, making it not show up. Anyone have any ideas?

CSS:

.Tabs /* PortalTabs in Default Layout & DefaultSubTabs Layout */
{
text-align: center;
vertical-align: middle;
border-color: #EEEFE9 #000 #000 #EEEFE9;
border-width: 1px 1px 1px 1px;
border-style: solid solid solid outset;
color: #FFF;
}

<table id="_ctl3_Banner_PortalTabs" cellspacing="0" align="Left" border="0" style="border-collapse:collapse;">
<tr>
<td class="Tabs"><a href="/SPOTv2_1/site/Spot-V2/1/Spot-V2.aspx">Home</a></td>
<td class="SelectedTabs"><a href="/SPOTv2_1/site/300/default.aspx">asdf</a></td>
<td class="Tabs"><a href="/SPOTv2_1/site/301/default.aspx">Technical</a></td>
<td class="Tabs"><a href="/SPOTv2_1/site/303/default.aspx">Departments</a></td>
<td class="Tabs"><a href="/SPOTv2_1/site/304/default.aspx">Site Map</a></td>
<td class="Tabs"><a href="/SPOTv2_1/site/329/default.aspx">Search</a></td>
<td class="Tabs"><a href="/SPOTv2_1/site/406/default.aspx">Test</a></td>
</tr>
</table>

[birdbrain]

Hi there Greven,

I'm afraid that you cannot set the borders in that manner. ;)

Try it like this...

border-top:1px solid #eeefe9;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:3px outset #eeefe9;

...also note that setting the outset value to 1px is pointless,
it will need a little more width for the effect to display.

You may find w3schools - borders [w3schools.com] helpful. ;)

birdbrain

[Greven]

Yeah, my apoligies for posting incorrect information, I had been testing to see if I could get the desired effect with outset alone(can't) and had left that in the code accidentally. I need it to be a solid left border, unfortunately, and thats what cause my issue.

[birdbrain]

Hi there Greven,

just use....

border-top:1px solid #eeefe9;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #eeefe9;

...problem solved. ;)

birdbrain

[Greven]

Thats the thing, unfortunately it doesn't. The left border just doesn't appear unless the width is greater the the right. I've tried removing any other conflicting rules, and none of it seems to make a difference. This is the exact rules:

.Tabs
{
text-align: center;
vertical-align: middle;
border-top:1px solid #eeefe9;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #eeefe9;
color: #FFF;
}

Would the fact that .Tabs is being applied to table cells be causing any of this? I can't think why, but how knows.

[birdbrain]

Hi there Greven,

the reason that you cannot see the right and left borders
independently is that you have this code...

style="border-collapse:collapse;"

...in the table tag :o

Remove it and they will butt up nicely...even in IE. ;)

birdbrain

[Greven]

I was afraid of that as its genereated content and now I gotta search through tons of code, but either way thanks for all the help, muchly appreciated.

[Greven]

Makes my job harder when I don't have access to the code I need, but regardless I was able to, through some bludgeon design, produce this:

<table id="_ctl3_Banner_PortalTabs" cellspacing="0" align="Left" border="0" style="border-collapse:collapse;border-collapse: seperate; border-spacing:15px;">

As I understand it, since the seperate rule is after the collapse in the list, it should override the collapse, right? For whatever reason I don't see any difference in display, including my left border still not appearing, after I have applied these changes. I've check IE6 and FF, both are the same. Any thoughts?

[birdbrain]

Hi there Greven,

if you unable to remove...
border-collapse:collapse;

...then add...
border-collapse:inherit;

...instead of
border-collapse:separate;

birdbrain

[Greven]

Thanks birdbrain, the inheirit fixed it in FF, but IE seems to be ignoring it. I'll mash it it for a while. Thanks again.

[birdbrain]

works OK for me in IE 6.0.2 ;)

[Greven]

I got it, apparently I had an extra border-collapse somewhere else in my css file, removed, worked. Thanks so much birdbrain, your a genius :)