valign for table rows not working with DOM

Discussion in 'JavaScript' started by James McMurray, Oct 1, 2007.

  1. #1
    I've got the following sample snippet:

    <script>
    function createTable() {
    	// get tde reference for tde body
    	body = document.getElementById("table-div");
    
    	tbl     = document.createElement("table");
    	tblBody = document.createElement("tbody");
    	tbl.setAttribute("width", "100%");
    	row     = document.createElement("tr");
    	row.setAttribute("valign", "top");
    	row.setAttribute("align", "right");
    
    	cell = document.createElement("td");
    	cellText = document.createTextNode("Text");
    	cell.appendChild(cellText);
    	cell.setAttribute("height", "300px");
    	row.appendChild(cell);
    
    	cell = document.createElement("td");
    	cellText = document.createTextNode("More Text");
    	cell.appendChild(cellText);
    	row.appendChild(cell);
    
    	// add tde row to tde end of tde table body
    	tblBody.appendChild(row);
    	// put tde <tbody> in tde <table>
    	tbl.appendChild(tblBody);
    
    	// add tde row to tde end of tde table body
    	tblBody.appendChild(row);
    	// put tde <tbody> in tde <table>
    	tbl.appendChild(tblBody);
    	// appends <table> into <body>
    	body.appendChild(tbl);
    	// sets tde border attribute of tbl to 2;
    	tbl.setAttribute("border", "1");
    }
    </script>
    	<body>
    		<div id="table-div">
    	</div>
    
    		<script>createTable();</script>
    	</body>
    PHP:
    When I load it everything works fine except for the valign attribute set via
    	row.setAttribute("valign", "top");
    PHP:
    Has anyone seen this before, and if so do you know either what the heck I'm doing wrong, or a workaround I can use?

    Thanks!
     
    James McMurray, Oct 1, 2007 IP
  2. code-rush

    code-rush Guest

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can try this:
    row.setAttribute("style", "vertical-align: top");
    Code (markup):
     
    code-rush, Oct 2, 2007 IP
  3. king_elf

    king_elf Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    row.setAttribute("style", "vertical-align: top");
    HTML:
    the code above still not working in IE my friends... i have try it on my javascript... is there any solution??
     
    king_elf, Jan 27, 2009 IP
  4. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Hi,
    not really sure why IE doesn't support always correctly setAttribute method, but you can use direct access to style properties. In this case - row.style.verticalAlign = "top";
     
    lp1051, Jan 28, 2009 IP