> The problem is that when the browser window is reduced in
> size, to the point that the table can no longer shrink to fit
> inside the available space, the table (but not the whole
> right div) drops down so that the top of the table is in line
> with the bottom of the left navigation div. This problem
> occurs in IE6 but not IE7 or Firefox.
Hi Stevio,
I think the trick is to take the table out of the normal flow by floating it
if it is in IE6. Then wrap the table with a positioned relative div that
takes close to the full width of the right container. This keeps text below
from creeping up the side.
Here is a test page I created that seems to do what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
<head>
<title>Example</title>
<meta http-equiv="content-type"
content="application/xhtml+xml;charset=utf-8" />
<style type="text/css">
body {
border: solid red 1px;
}
#navigation {
float: left;
width: 180px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 9px;
margin-right: 0px;
padding-left: 1px;
padding-right: 1px;
background: #CCCCFF;
border-top: 2px solid #336699;
border-bottom: 2px solid #336699;
}
#mainbody {
position: relative;
margin-left: 210px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 0;
border: solid black 1px;
}
#mainbody h2 {
margin: 0;
padding: 0;
background-color: #0f0;
}
.tablelist {
position: relative;
overflow: hidden;
width: 100%;
_width: 95%; /* may have to play with this value */
}
.tablelist table {
_float: left;
margin: 0;
padding: 0;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>News</li>
</ul>
</div>
<div id="mainbody">
<h2>My List</h2>
<div class="tablelist">
<table>
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
<tr><td>11111</td><td>22222</td><td>33333</td></tr>
</table>
</div>
</div>
</body>
</html>
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************BEGIN:VCARD
VERSION:2.1
N:Gelotte;Kepler;;Mr.
FN:Kepler Gelotte ([email protected])
ORG:Neighbor Webmaster
TITLE:Web Designer
TEL;WORK;VOICE:(732) 302-0904
TEL;WORK;FAX:(732) 302-0904
ADR;WORK:;;156 Normandy Dr;Piscataway;NJ;08854;United States of America
LABEL;WORK;ENCODING=QUOTED-PRINTABLE:156 Normandy Dr=0D=0APiscataway, NJ 08854=0D=0AUnited States of America
URL;WORK:http://www.neighborwebmaster.com
EMAIL;PREF;INTERNET:[email protected]
REV:20070415T052107Z
END:VCARD
