Skip navigation
Kkofal
Currently Being Moderated

Cflloop, Tables and CSS

Jan 19, 2012 11:48 AM

I have a web application that has an iframe (believe me it is necessary) split 69/30.  On the 30 portion of the page I have several tables that are stacked upon each other. 

All tables are designated with the following:

 

<table width="100%" border="3" borderColor="##c0504d">

 

Several of the tables are being hidden using the [id = #Varidable# style="display:none"] property.  The hidden tables are created by a <CFLOOP query=foo>.    Here is the problem the tables within the CFLOOP are not the same width as the tables outside of the CFLOOP.  The are just a tad wider. 

 

Here is a snippet of the actual code:

 

<CFOUTPUT>

     <table width="100%" border="3" borderColor="##c0504d">

          <TR>

               <th width="20%" align="Right">Risk:</th>

               <td width="80%" align="left">

                    #ThisTitle#

               </td>    

                                   </TR>

                                   <TR>

                                                  <th align="Right" valign="top">Risk Statement:</th>

                                                  <td align="left">

                                                                 #GetThisRiskInfo.RiskStatement#

                                                  </td>

                                   </TR>

                    </table>

                    <table width="100%" border="3" borderColor="##c0504d">

                                   <TR>

                                                  <td colspan="#zcount#">

                                                            <CFLOOP query="GetMission">#GetMission.CurrentRow#<BR>

                                                                           <CFIF GetMission.CurrentRow EQ 1>

                                                                                          <CFSET HideArray1 = "ShowMission#GetMission.MissionID#">

                                                                           <CFELSE>

                                                                                          <CFSET HideArray1 = HideArray1 & ", ShowMission#GetMission.MissionID#">

                                                                           </CFIF>

                                                            </CFLOOP>

                                                            <CFLOOP query="GetMission">

                                                                           <input type="radio" name="xMissionID" value="#GetMission.MissionID#" onClick="javascript:HideNShow('#HideArray1#', 'ShowMission#GetMission.MissionID#')">#GetMission.MissionName# <CFIF #CurrentRow# NEQ #GetMission.RecordCount#> | </CFIF>

                                                            </CFLOOP>

                                                  </td>

            </TR>

                    </table>

<CFLOOP query="GetMission">

                         <table width="100%" border="3" borderColor="C0504D" id="ShowMission#GetMission.MissionID#" style="display:none">

                                             <tr>

                                                            <td colspan="#ZCOUNT#" align="center">

                                                                           <strong>#GetMission.MissionName#</stron g>

                                                            </td>

          </tr>

          <tr>

               <td>

... etc blah etc

               </td>

          </tr>

     </table>

</CFLOOP>

</CFOUTPUT>

 

What can I do to alleviate the problem with the table borders not aligning?

 

Thanks!

 
Replies
  • Currently Being Moderated
    Jan 19, 2012 11:55 AM   in reply to Kkofal

    Copy the HTML output to a static HTML file.

     

    Modify the HTML to alleviate that problem you are having.  Likely culprits are cell content that is stretching the table and|or whitespace in places that whitespace can cause problems.  Whitespace shouldn't cause probelms in HTML, but sometimes it still does.

     

    Once you have the HTML working properly, port it back into the CFML page so that ColdFusion produces the desire HTML.

     

    THen pray and hope that you can someday make a better and easier to maintain layout.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 19, 2012 12:48 PM   in reply to Kkofal

    I am glad you found an answer, though I find it to be a bit of a strange answer.

     

    But that was not a sarcastic reply.  That is exactly how I would debug a complex display issue like this.  Remove the dynamic from the system until I solved the output issue.

     

    It is usually not that dificult to export the generate HTML from a browser into a file where one can then play with the elements to figure out what is causing the issue and then determine how to mitigate it.  Then one just needs to migrate the discovered solution back to the dynamic system.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 19, 2012 12:56 PM   in reply to Kkofal

    Kkofal wrote:

     

    Sarcasm is not appreciated.

    In ilssac's defence, I'm pretty sure there was no sarcasm intended there. If you want someone to fix your code, go pay a consultant. If you want people to look at your problem for free in their spare time, accept you might not always get answers back in word-for-word how you'd like.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points