Ie And Display Of Tables Question


Recommended Posts

I have this View that is from a Ruby on rails app,

<h1>Steve's Task List</h1>

<table style="text-align: left; width: 100%;" border="1">
<tr>
<th colspan=2>Title</th>
<th>Status</th>
<th>Percentage completed</th>
</tr>

<% for task in @tasks %>
<tr>
<td><%= link_to task.title , task %></td<td style=text-align:center><%= link_to image_tag("edit-32x32.png" , :size => "12x12", :alt => "Edit Entry",:border => 0), edit_task_path(task) %> <%= link_to image_tag('delete-32x32.png',:size => "12x12", :alt => "Edit Entry",:border => 0), task, :confirm => 'Are you sure?', :method => :delete %></span></td>
<td><%= if task.status
"Completed"
else
"In Progress"
end %></td>
<td ><%=h task.perc_compleated %>%</td>
</tr>
<% end %>
</table>

<br />

<%= link_to 'Create New task', new_task_path %>

it displays on every browser correctly except IE (any version)

on IE this: <th colspan=2>Title</th>

does not seam to work and it ignores this:

<td><%= link_to task.title , task %></td<td style=text-align:center><%= link_to image_tag("edit-32x32.png" , :size => "12x12", :alt => "Edit Entry",:border => 0), edit_task_path(task) %> <%= link_to image_tag('delete-32x32.png',:size => "12x12", :alt => "Edit Entry",:border => 0), task, :confirm => 'Are you sure?', :method => :delete %></span></td>

and places the icons in the same block, while on Firefox, safari and opera all show it correct..

is this a common problem with IE, I almost never use it, but my Boss only uses IE.

Thanks,

I can get screen shots if that is needed.. but I have to VPN to do so..

Link to post
Share on other sites

with more research its the two tables on the same line, here is the html Ruby creates...

Thanks for any help..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Tasks: index</title>
<link href="/stylesheets/scaffold.css?1202316543" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

<p style="color: green"></p>

<h1>Steve's Task List</h1>

<table style="text-align: left; width: 100%;" border="1">
<tr>
<th colspan=2>Title</th>
<th>Status</th>
<th>Percentage completed</th>
</tr>


<tr>
<td><a href="/tasks/4">Build Border Server Disk Image</a></td<td style=text-align:center><a href="/tasks/4/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/4" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >50.0% </td>
</tr>

<tr>

<td><a href="/tasks/5">Test Border image</a></td<td style=text-align:center><a href="/tasks/5/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/5" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >0.0% </td>
</tr>

<tr>
<td><a href="/tasks/6">Write install procedure for border server</a></td<td style=text-align:center><a href="/tasks/6/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/6" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>

<td>In Progress</td>
<td >0.0% </td>
</tr>

<tr>
<td><a href="/tasks/7">additional network accredidation</a></td<td style=text-align:center><a href="/tasks/7/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/7" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>

<td >80.0% </td>
</tr>

<tr>
<td><a href="/tasks/8">install gateway to additional network</a></td<td style=text-align:center><a href="/tasks/8/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/8" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >20.0% </td>

</tr>

<tr>
<td><a href="/tasks/9">Write instructions for wiki</a></td<td style=text-align:center><a href="/tasks/9/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/9" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >0.0% </td>
</tr>

<tr>
<td><a href="/tasks/10">write instructions for SharePoint</a></td<td style=text-align:center><a href="/tasks/10/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/10" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >0.0% </td>
</tr>

<tr>

<td><a href="/tasks/11">update as built documentation</a></td<td style=text-align:center><a href="/tasks/11/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/11" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >50.0% </td>
</tr>

<tr>
<td><a href="/tasks/12">enginer an acceptable solution for PL level</a></td<td style=text-align:center><a href="/tasks/12/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/12" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>

<td>In Progress</td>
<td >20.0% </td>
</tr>

<tr>
<td><a href="/tasks/15">Write template Co-ops COOP </a></td<td style=text-align:center><a href="/tasks/15/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/15" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>

<td >0.0% </td>
</tr>

<tr>
<td><a href="/tasks/16">Write SSP template for COOP</a></td<td style=text-align:center><a href="/tasks/16/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/16" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >0.0% </td>

</tr>

<tr>
<td><a href="/tasks/17">Build VMware Server</a></td<td style=text-align:center><a href="/tasks/17/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/17" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >90.0% </td>
</tr>

<tr>
<td><a href="/tasks/18">Create test </a></td<td style=text-align:center><a href="/tasks/18/edit"><img alt="Edit Entry" border="0" height="12" src="/images/edit-32x32.png?1202408419" width="12" /></a> <a href="/tasks/18" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '4cf7738b0a66ea3272daadb47e3dbbeec9d88c5f'); f.appendChild(s);f.submit(); };return false;"><img alt="Edit Entry" border="0" height="12" src="/images/delete-32x32.png?1202408479" width="12" /></a></span></td>
<td>In Progress</td>
<td >50.0% </td>
</tr>

</table>

<br />

<a href="/tasks/new"><img alt="New Entry" border="0" height="32" src="/images/add-file-32x32.png?1202408469" width="32" /></a>


</body>
</html>

Link to post
Share on other sites

Fixed...

I had an open tag

<td><%= link_to task.title , task %></td<td style=text-align:center>

it should have a > after the </td

Edited by iccaros
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...