Incorrect layout being rendered when accessing a page the first time - Page is displayed with a lot of blank spaces

Question

We have a simple ColdFusion page that is outputting basic HTML to the browser. The output consists of a table and inside the table there is a row which has a div section. Sometimes, when I access the page for the first time, the page is displayed with a lot of blank lines. However, when I access the page the second time the page is always displayed correctly, without any blank lines. We are using Internet Explorer 7. However, with Internet Explorer 8 this screen is apparently never rendered correctly.

Apparently the following section could be producing the problem:

...
<td>
  <div style="height:250px;overflow-y:scroll;">
   <table width="95%" cellpadding="0" cellspacing="0" border="0" align="center">
    <cfquery name="qryResult" datasource="#application.dsn#"> 
           ...query output...
        </cfquery>
   </table>
  </div>
</td>
...

I think the problem is related to div/row combination.

The div is useful because we need to show only a fixed number of rows at any point in time. The user would then simply scroll vertically to show the remaining rows.

Do you see a solution to our problem?

Answer 1

I think it yould be very useful if you would upload an example of your output page.

• Have you ever tried to give the div a fixed width?
• Do you use any Javascripts on that page?

Answer 2

Your code snippet:

<cfquery name="qryResult" datasource="#application.dsn#">   
       ...query output...
</cfquery>

Do you output data with cfquery?

Maybe it should look like this

<cfquery name="qryResult" datasource="#application.dsn#">   
SELECT SomeRow FROM SomeTable 
</cfquery>

<cfoutput query="qryResult">
#qryResult.SomeRow#
</cfoutput>

or

<cfloop query="qryResult">
#qryResult.SomeRow#
</cfloop>

Just want to say that your code does not give enough information, but produces confusion.