Forum Moderators: not2easy
I am moving a site to a fixed-width design. It contains a number of tables (for tabular data), and some of them are too wide for the desired width of the site.
I can deal with this using CSS by making specific pages wider. But I noticed a very odd thing: the tables wouldn't auto-size themselves to fit in the allotted space.
One column in particular wouldn't wrap. It contained a linked name, sometimes a long one, but with spaces, so it was wrappable (and did wrap on the old site with a non-fixed container).
When I removed the link, and displayed only the unlinked text, the table would auto-size so it fit within the containing DIV.
This behavior is consistent across Firefox, IE7, and Safari.
Can anyone shed any light on this? Is there any way to force linked text to wrap in this situation?
Thanks in advance,
Joe
are you saying the text links have spaces in them but are still not wrapping at the spaces?
the "veryverylonglink" situation can be solved using
{word-wrap: break-word;}anyway back to first scenario here's some pseudo code I put together based on your description and the wrap is working fine. Can you look over it and explain if this is what you are actually describing as I may have misread your intention. If it is OK, see what is different from your code maybe table-layout properties or any formatting on the links themselves or no explicit width involved anywhere?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#wrapper {width: 300px; margin: 0 auto; border: 1px solid #000;}
table {border-collapse: collapse;}
table td {border: 1px solid #f00;}
</style>
</head>
<body>
<div id="wrapper">
<table summary="test links">
<tr>
<td>short text for width</td>
</tr>
</table>
<table summary="test links">
<tr>
<td>one</td><td>blah blah.. some more text <a href="#">this is a very long space separated link </a> then some more text </td><td>two</td>
</tr>
</table>
</div>
</body>
</html>
thx
Still have a problem with Firefox, it leaves a column wide that it should be able to compress. That's another issue though. Thanks for your help.
Joe
