cells going beyond specified table width

I have always been able to control the width of tables, but the content inside is expanding the cell beyond the specifed width - how do  i prevent this
sahromAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cLFlaVACommented:

How are you currently 'controlling' the width of the cells?  Are you controlling the width of the cells?

You may need to a) set the width of the cells explicitly, or b) use overflow: hidden or overflow: auto or overflow: scroll to prevent this.
0
sahromAuthor Commented:
i have a div

#layoutTable {
      width: 780px;
    border-spacing: 0px;  
      font-size: 10pt;
      padding:0px;
}
that is a overall div - after the body and closes just below body

then I have a td where I was specifing it with css - then tried using html

and then one table within the td where I first specified the width with css

so it seems I tried - a) set the width of the cells explicitly

so then I should try b - if I am also using css to specify the width

thanks for your reply
0
cLFlaVACommented:
Why not get rid of the tables and just use divs?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
Post your code please.  Just setting widths is not going to control it.  Some browser like Mozilla will ernder outside the box if you do not give them coding that allows them to d something else.

Cd&
0
neesterCommented:
To control a table.
You need to control the cells as well...

First of all in css you should have this:

table
{
width: MAXWIDTHHERE;
}

then you need to either set PIXEL width for the cells that add up to the maxwidth... OR give them percentage values...
0
sahromAuthor Commented:
I will try posting my code because I have tried using just css to define the widths as well as html, neither were working

-----------html ----------------------
<!doctype HTML public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title>Web EXPRES</title>
<LINK rel="stylesheet" type="text/css" href="content.css">
</head>
<body bgcolor="#ffffff">
<div id="layoutTable">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="logosmall" rowspan="5"><img src="Logo.jpg" alt="PSP logo" width="207" height="148"></td>
   </tr>
  <tr>
    <td class="welcome" colspan="9">Welcome</td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<!-- begin left nav -->
  <tr>
    <td rowspan="2" class="navBG" background="logo2.gif">
      <table width="207" border="0" cellspacing="0" cellpadding="0">
</table>
<!-- end left nav -->
    <td class="medgreycontent">      
           <form name="booking" id="booking" method="post" onsubmit="booking.asp">
 <table class="maincontent" border="0" cellspacing="1" cellpadding="0" ID="Table2">
   <tr>
      <td class="bgltgrey width570 bold" colspan="3">width="573"width="573width="573"width="573""width="573"width="573"width=""width="573"width="573king</td>
    </tr>
      <tr>
            <td class="white" width="60%">width="573"width="573width="573"wer:</td>
            <td class="bgcream"><input type="Text" Name="Number" Size="9" Maxlength="9" id="Number"></td>
      </tr><!-- Submit Button -->      
   </table></form>
      </td>
  </tr>
</table>
</div>
</body>
</html>
---------------------------- css ------------------
i tried
#layoutTable {
      width: 780px;
    border-spacing: 0px;
    border-collapse: collapse;
      font-size: 10pt;
      padding:0px;
}
td.medgreycontent   {
      background-color : #E7E7E7;
      width: 570px ;       
      padding: 13px 9px 9px 13px;
      margin: 2px 2px 2px 2px;
       border-left:       1px solid #666666;
}
table.maincontent {
      background:       #E7E7E7;
      width: 570px ;
}

td.width570   { width: 570px; }
0
COBOLdinosaurCommented:
If you do not want the cells to change sizes the table must include this style attribute

table-layout:fixed;

Every cell must have a width specified CSS.  
Every table must have a width specifed in CSS.
Any cell that can overflow must have these CSS properties:

overflow:hidden; clip:auto;

Nest table may still break it.

If you continue to use tables for layout management you are going to spend a lorge part of your time
fixing broken pages.  Tables are not intended to be used  to manage layout. That is what CSS is for.

In the last century a lack of browser support for CSS  forced us to hack layouts with tables and frames
that is no longer necessary.  However if you like doing three times as much work for half the result  then
I guess using tables for layout is okay.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sahromAuthor Commented:
thanks, actually it is not that simple the tables were created before I came along a reduced the amount of table but since asp db code already exists it is harder to remove all tables
0
COBOLdinosaurCommented:
I understand the problem of haveing to work with code that is already there.  Unfortunately it takes time
to change things.  I wish I could come up with a program that would just take all the old code and
modernize it automatically; but in the meantime, like you, I have to work throught the old stuff, and try
do the new stuff too.  Thanks for the A. :^)

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.