Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Firefox - writes to screen before it reads entire page layout - content jumps around on load.

Posted on 2005-04-01
Medium Priority
Last Modified: 2010-04-09
I have several sites where the 800 pixel fixed width content floats off-center to the left in the browser window.  The page-content is in the middle of 3 overall layout columns with the left and right columns as width="x%" so the page-content will float with a bias to the left in the window.

This all works fine in IE because it reads all 3 layout columns before it starts writing to screen - so it positions the center page-content column in the correct place.

In Firefox the content columns starts by loading on the right side of the window and then jumps to the correct position after the 3rd column is read.

Is there a way to float a page-content column with a bias to the left in Firefox.   The left column can't be a fixed width because the content must shift to the left to fit in 800 Pixel Windows.  Is there a function of some type to keep firefox from displaying the page before it knows what the page layout is ?

Question by:swbruce21
  • 2
LVL 53

Expert Comment

ID: 13682734
The "problem" with Firefox is that it tries to optimize the load.  If you could do some to control that it would make the page even slower to load.

You are looking gfor the wrong solution to the wrong problem.  All page with any content tend to have some intermediate rendeing as the page loads. EE does Yahoo does, Amazon, Ebay, etc. So what is the normal behaviour the user are used to seeing.

The problem you need to address is that your page is bloated, and slow loading. Finding a way to prevent intermediate rendering is just going to make the real problem worse.If you want to improve the way the page does intermediate rendering then then you need to look at the problems in the page.  and you not going to like it because it looks like you are big on Microsoft.

1. Its and MSHTML page based on the meta tags.  That would explain a lot of the bloat, and the references to the obsolete document.layers object; as well as the use of so many depreciated attributes.  Plus like all MS web page generators, by design it output code that will impair and even break non-IE browser
2.  The scripting is inefficient.
3.  20th century style table managed layout are easy for genrators, but produce the possible loading pages.
4.  The total grphaics load contributes, especially using jpg instead of gif, but they just contribute to a load slowed by the table based layout.

So if you don't like the effect that is shown during the load, the solution is to fix the page to load faster.

LVL 53

Expert Comment

ID: 13682762
I also notice a real time lag with not responses too you.  This is a well staff topic and normally 10 during the day for responses.  However I suspect some experts were reluctant to post because clearly are a miscro soft person and there is no way to answer honestly without appearing to be MS-bashing.  Most would rather not debate MS strngths and weaknesses.


Accepted Solution

craigwardman earned 1000 total points
ID: 13685378
you could enclose each of the 3 sections within a tag, such as <DIV> with style: 'visibility:hidden;'

at the very bottom of the page, (the last part to load), use this code:

<img src="javascript: finishedLoading()" width=0 height=0>

put a JS function, as above, which sets the style of the 3 tagged fields (the <DIV> for e.g.) back to "visibility:visible;"

you could also include a 4th tag field, to say 'Page Loading...' and then hide this later..

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question