PDA

View Full Version : max-width table or div


bushbass
10-16-2003, 11:48 AM
I've been trying all morning to figure out if this is possible.

The content portion of my page is currently a 1 cell table at 90% width. (I know I should do that with css, It's an old design and I haven't had time) Works fine on up to about 800x600, but larger than that the text gets too stretched out. Is there some way to set the maximum width of the table to 750px but have it reamain liquid at narrower resolutions?

Here is an example page from the site:
http://www.bushwackers.org/member/openhouse2004.html
cyanide
10-16-2003, 12:06 PM
Yes that's the trouble with using percentage tables.

Usually what I do, is set the outside table to a fixed width, such as 780px, but have all the inner(nested) tables as percentage.
bushbass
10-16-2003, 12:55 PM
Yes that's the trouble with using percentage tables.

Usually what I do, is set the outside table to a fixed width, such as 780px, but have all the inner(nested) tables as percentage.

Not sure if I follow you, something like this? This doesn't do what I'm trying for.


<html><body>
<table width="750" border="1">
<tr>
<td>
<table width="50%" border="1">
<tr>
<td>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>

Someone on another board sent this code which does exactly what I want but unfortunately doesn't work in windows/ie

table {
width: 90%;
/*max-width doesn't work in IE/Windows,
but will work in all other browsers*/
max-width: 750px;
}

Anyone have a version that will work in IE/windows?
mikmik
10-21-2003, 12:25 PM
Finally got it, works IE 6 anyways but I haven't tested in other versions or other browsers. It does look fairly safe IMO.


<body><table cellpadding="1%">
<tr>
<td width="755">text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text
text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text
</td>
<td width="1%"></td></tr></table>

</body>

Please let me know....
bushbass
10-21-2003, 01:00 PM
Thanks! This seems to be working perfectly!
ranjan
10-22-2003, 03:00 AM
Example : http://dreamlettes.net/whims/maxwidth.htm

CSS can accept javascript expression. Hence it is possible to specify a DOM script in CSS to control the max width in IE.

Fisrt Let us make the max width CSS work with browsers that understand this CSS 2 property, namely Gecko and Opera.

The CSS looks like this

<style type="text/css">
<!--
table {
border:1px solid #666666;
max-width:800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #CCCCCC;
}
-->
</style>

The HTML

<table width="100%" border="0" align="center">
<tr>
<td>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</tr>
</table>

Internet Explorer undertands what is called as Conditional Statements. Conditional Statements are understood only by IE and other browsers treat them as comments.

eg.:

<!--[if ie]>
---do something---
<![endif]-->

This means that if the browser is ie then the HTML/ Scripts within the if and end if get executed

Using a javascript within CSS works like this

width:expression(document.body.clientWidth > 800? "800px": "auto" );

If clientWidth is greater than 800, width is 800 else it is set to auto

Combining Conditional Statement for IE and the CSS/Expression

we can make a IE specific style like this

<!--[if gte ie 5]>
<style>
table {
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
</style>
<![endif]-->

Now our code is complete and will work with all modern browsers

* if gte ie 5 means if IE is greater than version 5