vertical lines / one-sided table borders

How do I create two vertical lines to separate three column-sections in
a page? I was thinking of creating a table with three columns, but
borders would result in five vertical lines (borders on the outside,
too), instead of just three.

Apply a border style to the columns

..leftcol {border: 1px solid #color;}
..rightcol {border: 1px solid #color;}

and apply the class to left and right columns in your table
you may need to add some padding to give some breathing room for your text.

--
Nadia
-----------------
*Free Templates *Dropdown Menu Templates*
http://www.DreamweaverResources.com
*Templates - HTML and CSS Validated *
*Free Nav Bar Sets*
*Resources : Ecommerce : SEO Articles*
-----------------



"HB Hedden" <hhedden (AT) comcast (DOT) net> wrote

How do I create two vertical lines to separate three column-sections in
a page? I was thinking of creating a table with three columns, but
borders would result in five vertical lines (borders on the outside,
too), instead of just three.

.oO(HB Hedden)

How do I create two vertical lines to separate three column-sections in
a page?

table {border-collapse: collapse; border: hidden}
table td {border-left: 1px solid #000}

or

td {border-left: 1px solid #000}
td:first-child {border: none}

The latter won't work in IE (no support for pseudo-elements like :first-
child).

HTH
Micha

I tried this and i can't get it to work. grr.. I added these two lines in my
CSS file.

#leftbordertable {border-collapse: collapse; border: hidden}
#leftbordertable td {border-left: 1px solid #000}

Then i went to the cell i want only the left side to show and applied the
"leftbordertable" to the <td> and nothing happened.. Is there another way
this is supposed to be done? I mean do i just put these 2 lines into the
html code directly? Thanks

-Frank

"Michael Fesser" <netizen (AT) gmx (DOT) net> wrote

.oO(HB Hedden)

How do I create two vertical lines to separate three column-sections in
a page?

table {border-collapse: collapse; border: hidden}
table td {border-left: 1px solid #000}

or

td {border-left: 1px solid #000}
td:first-child {border: none}

The latter won't work in IE (no support for pseudo-elements like :first-
child).

HTH
Micha

Thanks, Nadia, it worked!

Actually, I'm such a newbie that I'd never even applied styles before
now! But I figured it out (with a little help from the book
"Dreamweaver MX the Missing Manual). But I wouldn't have known to use
styles without your suggestion. I didn't find anything under "vertical
lines" in the index.

HB:

I'm glad you find that book useful. It's the one I always recommend.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"HB Hedden" <hhedden (AT) comcast (DOT) net> wrote

Thanks, Nadia, it worked!

Actually, I'm such a newbie that I'd never even applied styles before
now! But I figured it out (with a little help from the book
"Dreamweaver MX the Missing Manual). But I wouldn't have known to use
styles without your suggestion. I didn't find anything under "vertical
lines" in the index.

.oO(Frank Oh)

I tried this and i can't get it to work. grr..

My fault. IE is not able of correctly handling collapsing borders. Looks
like it ignores the rules how to solve a border conflict.

Micha

.oO(Chijo)

Retro...nice...

Anyways, it works for me. Sounds like some things in CSS are not yet
universal??

They are in recent browsers like Opera and Mozilla with their very good
HTML/CSS implementations, but not in IE, which lacks many CSS properties
and features, even in v6. Additionally it has far more bugs (some of
them not only annoying, but system-endangering and still without a patch
available) than all other browsers together. So when using CSS you often
have to find workarounds for IE (or simply live with its problems if
they are not critical).

In other browsers you can make full use of all the nice features CSS has
to offer, especially all the different kinds of selectors, which allow
to keep the number of IDs and classes in the HTML-code quite small. You
are even able to try the upcoming CSS3 and its new selectors in Mozilla-
based browsers (allows alternatively colored table rows without a single
class for example).

CSS is a wonderful technique, the only - big - problem is MS-IE ...

NN4 has similar problems, but this has other reasons. MS has had enough
time to correctly implement the CSS standards in their IE (v6), but they
didn't and according to their FAQ they are not willing to do, so I guess
we as developers have to live with this dung hill of bytes for a very
long time.

Just my 2 ranted cents

Micha