CSS & column widths

Is there any way to control table or column width with external style sheets that works in both 4.0 browsers?

Anybody?

I haven't found one. Sorry dude. Check irt.org (ask if they don't have anything)

------------------
=-=-=-
biolight@yahoo.com
http://theDogPile.com

Obviously, one can use different .js files depending on which page one is on. And, one can change pages using redirects, which can happen based on conditions. I use this so that I can have different .js files depending on whether the reader is using Navigator or IE. This may not be as elegant as you'd hoped for, but it works. You can read an example of how this method can be implemented from my page http://davidl1621.freeservers.com/rose.html
(This was homework for a class, so some of the content is a little cheezy, but the code works... I've tested it using various versions of IE5.xxxxxxxxx and Navigator 4.x.)
Dave LaPointe
P.S. You could probably also do this by generating HTML/javascript on server side using ASP/CGI/JSP, etc. So, although it isn't necessarily straightforward, there are numerous workarounds. Which workaround is appropriate depends on the details of what you are trying to do, of course.

I have something that works for NS4.7 and IE5 and IE5.5. It may work elsewhere, but I haven't tested it. My version uses no tables whatsoever and has a left column (L) of constant width. The right "column" is actually a box (R) so that below the box, the center text (C) flows around it and all sits below a header (H). So it's like this (if my ASCII art works):

HHHHHHHH
LLCCCCRR
LLCCCCRR
LLCCCCCC
LLCCCCCC

Some notes:

It's a real hassle to get all of this to work, and I just wanted to see if I could. Some examples:
1. NS4 does background color poorly, so I use a 1-pixel image to provide a background color that fills the entire box, instead of just following the text.

2. IE5.5 has a bug in the way it does margins, so you have to pad the box rather than use a margin.

3. The trick is to mix absolutely and relatively boxes. For example, the left column could have a width of 12em and be positioned absolutely in the top left. Then The center column has a padding of 12em to provide space for the left column + 3em for a margin (thus padded 15em).


I hope this doesn't turn out to be disastrous, but I will try to include the style sheet here using Devshed code tags. If it doesn't work, email me at tomZZZZ@lambert.net (remove the ZZZZ which is only to confuse spam page scrapers). Also, check out the excellent tutorials at http://webreference.com/html/ Look up tutorials 19 and 21 which cover this pretty fully.

Tom

<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
/* suggest styles for text elements */

/* Multi selection necessary because inheritance doesn't work well in */
/* tables in any browser, and works poorly in Nav4x in all situations */

body, table, th, td, p {font-family: trebuchet, helvetica, times, sans-serif;}

/* special for h3 for use with leftnav class because inheritance so bad in Nav4x */
h3 {
font-size: 12pt;
text-align: center;
}

/* link styles */
a:link.navlink, a:visited.navlink {color: blue; text-decoration: none;}
a:hover.navlink {color: blue; text-decoration: underline;}

dt {
font-size: 12pt;
font-weight: bold;
}
dd {
font-size: 10pt;
text-indent: -4em;
}

p.longtext {
text-indent: 3em;
line-height: 1.4;
}

/************************************************************/
/* Page layout style. */
/* See comments regarding buggy browser work-arounds. */
/************************************************************/

.main {
position: relative;
padding-right: 5em;
}
.content {
padding-left: 15.5em; /* margin is buggy in IE5.5 */
font-size: 12pt;
}
.leftnav {
position: absolute;
left: 0;
width: 14em;
padding: 1em;
background-image: url(tan.gif); /* background-color buggy in Nav4x */
background-repeat: repeat;
font-size: 10pt;
}

.rightbox{
float : right;
width : 25%;
padding: 1em;
background-image: url(tan.gif); /* background-color buggy in Nav4x */
background-repeat: repeat;
font-size: 10pt;
}
.header {
text-align: center;
}

.footer {
padding-top: 2em;
text-align: center;
font-size: 10pt;
}[/code]