homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Creating a VERTICAL line with CSS?
tedster




msg:1222199
 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?

 

Marcia




msg:1222200
 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?

Brett_Tabke




msg:1222201
 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.

tedster




msg:1222202
 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.

tedster




msg:1222203
 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.

knighty




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

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

tedster




msg:1222205
 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.

gmiller




msg:1222206
 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