homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Creating a VERTICAL line with CSS?

 9:03 am on Mar 19, 2001 (gmt 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)

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)

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)

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

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)

What about using CSS to have a line running vertically as a background?


 7:01 pm on Mar 19, 2001 (gmt 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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved