R
Ryan Stewart
The code below does almost exactly what I want it to. The only thing
that's wrong is that the text needs to wrap if it overflows
horizontally. By using "overflow-x: auto" in the div, you can put a
scrollbar in that will properly display everything, but that isn't
acceptable. Also, you can achieve the desired wrapping effect by
specifying an absolute size rather than relative, but that's no good
either. It needs to be a dymanically sizing table with horizontal text
wrapping and a vertical scrollbar when needed. Ignore everthing within
the <ul> tags. This is just a prototype and I needed some filler to
test it.
<html>
<head>
<title>A Prototype</title>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<div align="center">
<table style="width: 100%; height: 100%; table-layout: fixed;"
class="outer">
<tr style="height: 1%;">
<td align="left" valign="top" class="header">
Aircraft
</td>
</tr>
<tr>
<td align="left" valign="top" style="width: 100%;">
<div style="height: 100%; width: 100%; overflow-y: auto;">
<ul>
<li><a href="catView.html"><img src="redSquare.gif"
border="0" /> Category 1</a></li>
<li> A
Category</li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
very very very very very long file description that couldn't possibly
fit in one table width. <a href="fileView.html"
class="desc">More</a></li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
file description. <a href="fileView.html" class="desc">More</a></li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
file description. <a href="fileView.html" class="desc">More</a></li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
file description. <a href="fileView.html" class="desc">More</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
that's wrong is that the text needs to wrap if it overflows
horizontally. By using "overflow-x: auto" in the div, you can put a
scrollbar in that will properly display everything, but that isn't
acceptable. Also, you can achieve the desired wrapping effect by
specifying an absolute size rather than relative, but that's no good
either. It needs to be a dymanically sizing table with horizontal text
wrapping and a vertical scrollbar when needed. Ignore everthing within
the <ul> tags. This is just a prototype and I needed some filler to
test it.
<html>
<head>
<title>A Prototype</title>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<div align="center">
<table style="width: 100%; height: 100%; table-layout: fixed;"
class="outer">
<tr style="height: 1%;">
<td align="left" valign="top" class="header">
Aircraft
</td>
</tr>
<tr>
<td align="left" valign="top" style="width: 100%;">
<div style="height: 100%; width: 100%; overflow-y: auto;">
<ul>
<li><a href="catView.html"><img src="redSquare.gif"
border="0" /> Category 1</a></li>
<li> A
Category</li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
very very very very very long file description that couldn't possibly
fit in one table width. <a href="fileView.html"
class="desc">More</a></li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
file description. <a href="fileView.html" class="desc">More</a></li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
file description. <a href="fileView.html" class="desc">More</a></li>
<li><a href="" onclick="window.open('test.doc');return
false;"><img src="greenCircle.gif" border="0" /> A File</a></li>
<li> A
file description. <a href="fileView.html" class="desc">More</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>