[nmg]

HTML part:

<div id="bodyC" class="bodyC" align="center">
<table width="60%" height="100%"><tr>
<td class="bodyCC" id="bodyCC" height="100%" width="59.7%">
    <table id="MYtable" class="MYtable" border="0" width="100%" height="50%" cellpadding="50"><tr>
		<td id="one" width="33%" class="one" onclick=""></td>
		<td id="two" width="34%" class="two" onclick=""></td>
        <!--<td id="three" width="33%" class="three" onclick=""></td>--></tr>
    </table>
    </td></tr>
</table>
</div>

javascript part:

function contact()
{
	document.getElementById('one').onclick="";
	document.getElementById('two').onclick="";
	document.getElementById('one').width="25%";
	document.getElementById('two').width="75%";
	document.getElementById('one').style.cursor="";
	document.getElementById('one').vAlign = "top";
	document.getElementById('two').vAlign = "top";
	document.getElementById('one').style.backgroundImage = null;
	document.getElementById('two').style.backgroundImage = null;
	document.getElementById('one').style.lineHeight="150%";
	document.getElementById('two').style.lineHeight="50%";
	document.getElementById('two').align = "left";
	
	var GPwidth = document.getElementById('bodyC').style.width;
	GPwidth = GPwidth * 20;
	
	document.getElementById('one').innerHTML = "<p id='pOne' heigth='100%'>First Name: <input type='text' name='Fname' id='Fname' class='Fname' maxLength='20' size='20'/><br><br>Last Name: <input type='text' name='Lname' id='Lname' class='Lname' maxLength='20' size='20'/><br><br>Email: <input type='text' name='email' id='email' class='email' maxLength='20' size='20'/><br><br>Subject: <input type='text' name='subj' id='subj' class='subj' maxLength='20' size='20'/></p>";
	document.getElementById('two').innerHTML = "<br><textarea style='font-family:arial,sans-serif' rows='14' cols=58 name='Tarea' class='Tarea' id='Tarea' height='100%'></textarea><button type='button' onclick='Email()'>Send</button>";
	document.getElementById('Tarea').overflow="auto";
	document.getElementById('Tarea').cols = GPwidth;	
}

css part:

#bodyC { position:fixed; top:40%; left:-1; width:100%; height:60%; }

.bodyCC
{
	background-image: url(http://oi45.tinypic.com/m7gqcx.jpg);
	position: fixed;
	background-repeat: no-repeat; 
	background-size: 100% 50%;
}

I only copied the parts that matter.
bodyC is sort of the background table, and i'm trying to make the cols in the textarea to be relative to its' width.

i've tried

var GPwidth = document.getElementById('bodyC').style.width;
GPwidth = GPwidth * 20;
document.getElementById('Tarea').cols = GPwidth;	

(which you can see in the javascript part)
but each time it gives me 0 cols.
i've also tried changing the "width=100%" in the CSS to "width=800" but there still were 0 cols.

can anyone help?

[nmg]

really..? nobody..?

[Atli]

Quote

bodyC is sort of the background table, and i'm trying to make the cols in the textarea to be relative to its' width.

Why are you trying to do that? Wouldn't it make more sense to make it relative to the element that contains the textarea? If you give it a cols value relative to the #bodyC element, it's size will not be in sync with it's container's with.

In any case, the cols attribute is not really important these days. It's required in HTML4, but it's not required in HTML5. - Just put down some reasonable cols value, like 20 or 30 (for standards compliance mostly, rather than for any practical purpose), and then use the CSS width style to specify the real width. It'll override the width the browser would set based on the cols value.

In your code, I would set the CSS width of the textarea to 100%. That way it'll adjust itself to fill out it's containers width.

Quote

ve also tried changing the "width=100%" in the CSS to "width=800" but there still were 0 cols.

CSS does not assume unit values. If you tell it width: 800;, it'll drop the style because it doesn't know what the number 800 is meant to represent; whether you want it to be 800 pixels, points, em, or percent. You need to specify that: width: 800px;


There are also a couple of other things I'd like to point out.

• In Javascript, if you have to reference the same element repeatedly, store it in a Javascript variable so you don't have to keep calling document.getElementById (or other such functions) over and over again.
  

  var one = document.getElementById("one");
  one.style.width = "50%";
  one.style.height = "50%;";
  // etc...
  
  

  
  
  
• Use of HTML styling elements and attributes is mostly obsolete these days. CSS was created to replace all that. It's best to rely on CSS to style your pages, rather than HTML styling tags and attributes.
  

  // Don't do:
  <table width="50%" height="75%" align="center">
  
  // Instead do this:
  <table id="theTable">
  
  // And put this in your CSS file/block
  #theTable {
      width: 50%;
      height: 75%;
      
      /* This last one centers a block element that has
       * a defined width */
      margin: 0 auto;
  }
  
  

  
  
  
• It's generally a bad idea to set up your page layout using a table. Tables are meant to display tabular data, not to position elements on the page. Instead use <div> and other such elements as containers, and position them using CSS.