Submit Your Article Forum Rules

Results 1 to 6 of 6

Thread: max-width table or div

  1. 10-16-2003, 11:48 AM #1
    bushbass
    bushbass is offline
    Junior Member bushbass's Avatar
    Join Date
    Jul 2003
    Posts
    7

    max-width table or div

    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
    Reply With Quote Reply With Quote
  2. 10-16-2003, 12:06 PM #2
    cyanide
    cyanide is offline
    Senior Member
    Join Date
    Jul 2003
    Posts
    1,771
    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.
    Web Hosting Guru
    | Need Help For Your Forum?
    Reply With Quote Reply With Quote
  3. 10-16-2003, 12:55 PM #3
    bushbass
    bushbass is offline
    Junior Member bushbass's Avatar
    Join Date
    Jul 2003
    Posts
    7
    Quote Originally Posted by cyanide
    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.

    Code:
    <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
    Code:
    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?
    Reply With Quote Reply With Quote
  4. 10-21-2003, 12:25 PM #4
    mikmik
    mikmik is offline
    WebProWorld MVP mikmik's Avatar
    Join Date
    Aug 2003
    Posts
    1,557

    Done!

    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....
    Babies don't need a vacation, but I still see them at the beach... it pisses me off! I'll go over to a little baby and say 'What are you doing here? You haven't worked a day in your life!'
    Steven Wright
    Reply With Quote Reply With Quote
  5. 10-21-2003, 01:00 PM #5
    bushbass
    bushbass is offline
    Junior Member bushbass's Avatar
    Join Date
    Jul 2003
    Posts
    7

    Re: Done!

    Thanks! This seems to be working perfectly!
    Reply With Quote Reply With Quote
  6. 10-22-2003, 03:00 AM #6
    ranjan
    ranjan is offline
    Senior Member ranjan's Avatar
    Join Date
    Sep 2003
    Posts
    152

    Max Width and IE

    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
    ranjan | Macromedia Certified Dreamweaver MX Developer
    http://www.dreamlettes.net - a dreamweaver resource
    http://www.ranjan.ws - got blog?
    http://www.total-impact.com - a web design community
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Width of website
    By simonm in forum Graphics & Design Discussion Forum
    Replies: 27
    Last Post: 10-13-2008, 07:45 AM
  2. My Sites Width
    By Olynsky in forum Graphics & Design Discussion Forum
    Replies: 4
    Last Post: 04-16-2008, 03:24 PM
  3. Page Width
    By mickstaf35 in forum Graphics & Design Discussion Forum
    Replies: 2
    Last Post: 08-01-2006, 03:15 PM
  4. DIV width
    By jannmirch in forum Graphics & Design Discussion Forum
    Replies: 1
    Last Post: 07-27-2006, 03:49 PM
  5. Table Align to table
    By sysop9999 in forum Graphics & Design Discussion Forum
    Replies: 3
    Last Post: 11-10-2005, 10:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules