Tables and CSS - Take 2

[Broun, Kevin (NIH/NCI)]

How about just having the div that contains the table get its own scroll
bars, rather than scrolling the whole viewport?

Code below floats both the menu and content divs, gives the menu div a right
margin, removes the margin from content (it was confusing Opera, I think),
and adds a clearing div for the stuff below the menu and content.  Tested on
Windows IE 6, Mozilla 1.7, and Opera 7.2.3, and on Mac Safari 1.2.1, Mozilla
1.3 (yes, I know that's old!), and IE 5.2.  Mac IE 5.2 was the only one of
those 6 that didn't cooperate -- good thing that's a dying browser.

Your mileage may certainly vary!

- Kevin

--------------------------

<style type="text/css">
<!--

#wrapper {
border: solid 2px #00F;
width: 100%;
}

#menu {
background: #C66;
color: #FFF;
float: left;
width: 15%;
margin-right: 2%;
}

#content {
float: right;
background: #CCF;
border: solid 2px #090;
width: 80%;
overflow: scroll;
}

#clearing {
clear: both;
}

-->
</style>

-----Original Message-----
From: Andrew Mutch [mailto:amutch at waterford.lib.mi.us]
Sent: Friday, July 02, 2004 2:41 PM
To: Multiple recipients of list
Subject: [WEB4LIB] Tables and CSS - Take 2


Thanks to everyone who sent me suggestions on how to tame my problem with
misbehaving tables and DIVs in Internet Explorer. Unfortunately, none of the
tips worked. However, I did get a lead on some great articles that helped me
solve some other CSS-related problems I had run into before. Those are
located here:

http://www.positioniseverything.net/explorer.html
[IE specific bugs in CSS]

http://www.positioniseverything.net/index.php
[More great CSS resources from the same site]

A couple people had asked me for a stripped-down test case that validated to
see if they could help me figure out how to make that work. Since I had put
together one for my own testing, I'm posting that now that I've run out of
potential solutions. The test page illustrates what I want the CSS to do and
what actually happens in IE. It works fine in Mozilla 1.7. In IE 6, it
misbehaves. I'm also going to post to css-d to see if they can assist.
Here's the validated test case:

http://tln.lib.mi.us/~amutch/css/tabletest1.htm

For ease of testing, I've included the CSS in the page. Normally, it would
be linked to a separate stylesheet. But as far as I know, this has no impact
on the problem.

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI