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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

771 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