Welcome to WebmasterWorld Guest from 54.145.176.120

Forum Moderators: not2easy

Message Too Old, No Replies

Creating a VERTICAL line with CSS?

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

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



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)

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



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)

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



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)

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



>> 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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



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

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



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)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month