Link to home
Start Free TrialLog in
Avatar of sahrom
sahrom

asked on

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
Avatar of cLFlaVA
cLFlaVA


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.
Avatar of sahrom

ASKER

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
Why not get rid of the tables and just use divs?
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&
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...
Avatar of sahrom

ASKER

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; }
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sahrom

ASKER

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
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&