Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: not2easy

Message Too Old, No Replies

Creating a VERTICAL line with CSS?

     
9:03 am on Mar 19, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


I've been working hard to learn how to avoid using tables for layout, and I'm very happy with results so far. The pages render a lot faster (especially in Netscape, which chokes on table computations anyway).

There's one job I just can't figure out how to do without using tables, and that's creating a vertical line that runs the full length of a section. Layout tables are so accommodating here. Using bgcolor in a table cell I can create a vertical line that stretches or compresses with the layout, no matter whether the viewer overrides my font settings or not.

I can't figure out similarly flexible and accomodating method using only CSS and no layout tables. Right now I just create the layout so it looks good with my font choices, but I know it degrades fast.

The need for a flexible vertical line comes up often enough that I'd like to find a method that avoids tables. Is there one?

9:19 am on Mar 19, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 29, 2000
posts:12095
votes: 0


I am totally reliant on tables myself. But I do believe it uses <HR> with a width of 1 pixel and height designation of "whatever". Is that correct?
9:39 am on Mar 19, 2001 (gmt 0)

Administrator from US 

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 1999
posts:38047
votes: 11


Well, my first thought was to set border right, top, bottom to a width of 0 and then the border-left to the size and color I wanted. Didn't work. Ok, try two: set top, right, bottom border of a box to color of the background. Worked...a little. But as always, netscape has severe problems.
9:41 am on Mar 19, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


>> width of 1 pixel and height designation of "whatever". Is that correct?

Yes, but it's that "whatever" that confounds me. How do I say "draw it until the div content stops"?

So far, all I can come up with is very convoluted JavaScript (separate code for NN4 and MSIE5 and nothing works so far in NN6) to read the rendered height of the div.

If that's the best answer, I'll stick with tables for this job.

9:46 am on Mar 19, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Thanks for the experiment, Brett. I never thought about setting three borders to the background color. It's a good shot.

For now I guess I'll just have my eyes open for live examples. So far, everything I've checked out uses tables.

1:58 pm on Mar 19, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2001
posts:690
votes: 0


What about using CSS to have a line running vertically as a background?
7:01 pm on Mar 19, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Thanks knighty, that has potential. My first shot at it seems to have a few associated Netscape problems, but I'm going to play with this direction some more.
11:22 pm on Mar 19, 2001 (gmt 0)

Full Member

10+ Year Member

joined:Oct 18, 2000
posts:256
votes: 0


Quick question about the left border, Brett: what code did you use? NN4 can't handle the border-left, but it can handle border-left-style, etc.

Also be aware that NN4 tends to throw in extra padding just for entertainment value.