Forum Moderators: open
I create a table and inside this table in a <tr> I put other table... That only appears if the style is block... if it is none we don´t see it... In IE it works perfectly...
In safari it open the second table, but the first aligns right and when we close the second table, the first remains in right.
I don´t know if you had understand me... if not please tell me that I try to explain better.
Thank you very much
Sílvia
A nested table should be in a <td>, not a <tr>. First, I suggest validating your HTML and CSS at [w3.org...] . This will narrow down your problem.
Marshall
[edited by: Marshall at 4:36 pm (utc) on Sep. 19, 2007]
Thank you very much for your replays and for the welcome message :)
In first place, I made a mistake... I put inside a <td> and not a <try> as I said before.
I send you the code, maybe this help. Is there a way of putting an image so you can see how it appears?
<table border="0" cellpadding="0" cellspacing="0" width="670">
<tr>
<td align="left" style="padding: 5px" colspan="2">
<font class="titulonoticia"><b>Cliente</b></font>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia">
<%if admprmequipa="1" then %>
<b>Equipa</b>
<%end if%>
</font>
</td>
</tr>
<%
name=1
num=1
Do while not rs.eof
%>
<tr>
<%
sql="select * from accao where id_clientenpr='"&RS("idclientenpr")&"' and id_subclientenpr='" & RS("idsubclientenpr") & "'"
if activos="1" then
sql=sql& " and (accao.data_fim is null or accao.data_fim='')"
elseif activos="0" then
sql=sql& " and (accao.data_fim is not null and accao.data_fim<>'')"
end if
Set cn1 = Server.CreateObject("ADODB.Connection")
cn1.ConnectionTimeout = 300
cn1.CommandTimeout = 300
cn1.Open "validanp"
set rs1=Server.CreateObject("ADODB.Recordset")
rs1.open sql,cn1
if not rs1.eof then
%>
<td bordercolor="#000000" align="left" bgcolor="#FFFFFF" width="26">
<a href="javascript:abrir('<%response.write "p" & num%>');"><img id="imgp<%=num%>" border="0" align="right" src="../images/expand.gif" alt="abrir" WIDTH="16" HEIGHT="16"></a></td>
<% else %>
<td bordercolor="#000000" align="left" bgcolor="#FFFFFF" width="26">
</td>
<% end if %>
<td align="left" style="padding: 5px" width="337">
<img border="0" src="../images/small_pr.jpg" width="14" height="16">
<%
subcliente=""
nomecliente= RS("nomeclientenpr")
if RS("nomesubclientenpr")<>"" then subcliente= "-" & RS("nomesubclientenpr")
%> <b><%=nomecliente%></b><%=subcliente%>
</td>
<td align="left" style="padding: 5px" width="261">
<%
if admprmequipa="1" then
sql="select equipasprm.nome nomeequipa from equipasprm inner join clientenpr on equipasprm.id=clientenpr.id_equipa "
sql=sql&" where refcliente='"&refaccao&"' and clientenpr.id='"&rs("idclientenpr")&"'"
Set cn2 = Server.CreateObject("ADODB.Connection")
cn2.ConnectionTimeout = 300
cn2.CommandTimeout = 300
cn2.Open "validanp"
'response.write(sql)
set rs2=Server.CreateObject("ADODB.Recordset")
rs2.open sql,cn2
if rs2.eof then
response.write("Administrador")
else
response.write(""&rs2("nomeequipa")&"")
end if
rs2.close
cn2.close
end if
%>
</td>
</tr>
<% if not rs1.eof then %>
<tr id="trp<%=num%>" style="display:none">
<td align="left" width="26">
</td>
<td bgcolor="#F4F7F3" colspan="3" style="border: 0 solid <%=corlinhas%>; padding: 10" >
<p align="justify"><font class="titulobarra">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="left" style="padding: 5px" colspan="3">
<font class="titulonoticia"><b>Nome da Accao</b></font>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia"><b>Descrição</b></font>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia"><b>Nª Meios a Enviar</b></font>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia"><b>Data</b></font>
</td>
</tr>
<%
num2=1
do while not rs1.eof
%>
<tr>
<td bgcolor="#F4F7F3" align="left" bgcolor="#FFFFFF" width="26">
<% if rs1("data_fim")<>"" or not isnull(rs1("data_fim")) then %>
<font color="#CC3300"><b>Concluida</b></font>
<%end if%>
</td>
<td align="left" style="padding: 5px">
<a href="noticias_accao.asp?id_accao=<%=RS1("id_accao")%>">
<img border="0" src="../images/small_pr.jpg" width="14" height="16">
</a>
</td>
<td align="left" style="padding: 5px">
<a href="noticias_accao.asp?id_accao=<%=RS1("id_accao")%>">
<font class="titulonoticia"><%=RS1("nomeaccao")%></font>
</a>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia"><%=RS1("descricaoaccao")%></font>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia"><%=RS1("numeromeios")%></font>
</td>
<td align="left" style="padding: 5px">
<font class="titulonoticia"><%=RS1("data")%></font>
</td>
<td align="center" style="padding: 5px">
<a href="visualizar_docsaccoes.asp?id_accao=<%=RS1("id_accao")%>"><img border="0" src="../images/guardar.gif" alt="Ver documentos"></a>
</td>
<td align="center" style="padding: 5px">
<% if gestcont="1" then %>
<% if rs1("data_fim")="" or isnull(rs1("data_fim")) then %>
<a href="pesqjornaccao.asp?id_accao=<%=RS1("id_accao")%>"><img border="0" src="../images/email.gif" alt="Comunicar Acção"></a>
<%end if%>
<% end if %>
</td>
<td align="center" style="padding: 5px">
<a href="follow-up.asp?id_accao=<%=RS1("id_accao")%>"><img border="0" src="../images/icons/followups_16.gif" alt="Follow-up"></a>
</td>
<% if rs1("data_fim")="" or isnull(rs1("data_fim")) then %>
<td align="center" style="padding: 5px">
<a href="desactivar_accao.asp?id_accao=<%=RS1("id_accao")%>"><img border="0" src="../images/icons/date-time_preferences.png" alt="Finalizar Acção"></a>
</td>
<% end if%>
</tr>
<%
num2=num2+1
rs1.movenext
loop
rs1.close
set rs1=nothing
cn1.close
set cn1=nothing
%>
</table>
<%
end if%>
</font></p></td></tr>
<%
rs.movenext
name=name+1
num=num+1
LOOP
rs.close
set rs=nothing
cn.close
set cn=nothing
%>
</table>
The function that change the style of the display is this:
var imgPlus = new Image();
var imgMinus = new Image();
imgPlus.src = "../images/mais.jpg";
imgMinus.src = "../images/menos.jpg";
function abrir(sScope)
{
var oTable = document.all["tr" + sScope];
var oImg = document.all["img" + sScope];
if (oTable && oTable.style.display == "block")
{
oImg.src = imgPlus.src;
oTable.style.display = "none";
}
else
{
oImg.src = imgMinus.src;
oTable.style.display = "block";
}
}
In second place, the rocknbil, tell me to avoid nested tables.. Do you think its a good idea to replace the second table with divs?
Thank you very much.
Sílvia
In safari it open the second table, but the first aligns right and when we close the second table, the first remains in right.
First, validate your output as Marshall suggested. If you can't call this page by a public URL (behind a login,) create a copy of the output. Let the ASP page output, then "view source" and copy this into a file. You may then go to the link to the W3C validator to validate the page, this will eliminate html coding errors. You can put the file somewhere on your server and validate by URL or upload the file itself to the validator.
Second, both my ASP and Italian (or Spanish? :-) ) are very rusty. As for the nested tables, at first glance:
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="left" style="padding: 5px" colspan="3">
<font class="titulonoticia"><b>Nome da Accao</b></font>
</td>
...........
</tr>
Since all your table cells are aligned left, it should be relatively easy to create a div for each row and float the inner divs left:
.titulonoticia { float: left; width: 24%; padding:5px; font-weight: 700;}
<div style="width: 600px;">
<div class="titulonoticia">Nome da Accao<div>
<div class="titulonoticia">Descrição<div>
<div class="titulonoticia">Nª Meios a Enviar<div>
<div class="titulonoticia">Data<div>
</div>
You would then output a separate div fo each row. It's a bit hard to tell, and I do note you have a colspan=3 on that inner table there, so there is probably more here than meets the eye.
Before you try any of this, I would do two things:
1. Get the output validating as is, with the nested tables.
2. Remove all the inline styles and put them in an external style sheet or at least a style sheet in the head of the document. For example,
<td align="center" style="padding: 5px">
Could be
.some-descriptive-style { text-align:center;padding:5px; } <td class="some-descriptive-style">
This will remove a lot of "white noise" from your code and make it much easier to see "what's going on" and sort out the problems.
I had made a simplest code with the same problem... I try to validate in wwwc3 html validator, but it is always given me errors that I don´t understand.. can you help me,e put this working well in safari? With or without nested tables?
<html>
<head>
<title>New Page 1</title>
<style type="text/css">
tablestyle { text-align:center;padding:5px; }
</style >
<script type="text/javascript">
var imgPlus = new Image();
var imgMinus = new Image();
imgPlus.src = "images/mais.jpg";
imgMinus.src = "images/menos.jpg";
function abrir(sScope)
{
var oTable = document.all["tr" + sScope];
var oImg = document.all["img" + sScope];
if (oTable && oTable.style.display == "block")
{
//alert('none');
oImg.src = imgPlus.src;
oTable.style.display = "none";
}
else
{
//alert('block');
oImg.src = imgMinus.src;
oTable.style.display = "block";
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="670">
<tr align="left">
<td class="tablestyle" colspan="2">
<b>Cliente</b>
</td>
<td class="tablestyle">
<b>Equipa</b>
</td>
</tr>
<tr>
<td class="tablestyle" width="26">
<a href="javascript:abrir('p1');"><img id="imgp1" border="0" align="right" src="images/expand.gif" alt="abrir" WIDTH="16" HEIGHT="16"></a></td>
<td class="tablestyle" width="337">
<img border="0" src="images/small_pr.jpg" width="14" height="16">
<b>Nome1</b>
</td>
<td class="tablestyle" width="261">
Nome2
</td>
</tr>
<tr id="trp1" style="display:none">
<td class="tablestyle" width="26">
</td>
<td colspan="3" style="border: 0 solid ; padding: 10" >
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="tablestyle" colspan="3">
<b>Nome da Accao</b>
</td>
<td class="tablestyle">
<b>Descrição</b>
</td>
<td class="tablestyle">
<b>Nª Meios a Enviar</b>
</td>
<td class="tablestyle">
<b>Data</b>
</td>
</tr>
</table>
</td></tr>
</table></body>
</html>
Ist very important for me to solve this issue...
Thank you very much,
Sílvia
