lower part of dwt gets displayed 'briefly' when page loads

Forum Moderators: open

Message Too Old, No Replies

lower part of dwt gets displayed 'briefly' when page loads

Gemini23

9:48 pm on Mar 9, 2009 (gmt 0)

Hi, I have a website that is put together using Microsoft Expression Web 2 and using a DWT. I have noticed recently that if I view an 'inner web page' (ie not the index page)text that is at the bottom of the DWT (it is in fact a telephone number) gets displayed for a 'split second' at the top part of the screen over the top of the correct text and then the web page shows correctly. This doesn't seem to occur once I have visited the page and I guess is then in the temporary internet files. The web pages are W3C//DTD HTML 4.01 Transitional and validate with zero errors. The style type is text/CSS.

Has anyone any ideas as to why this is happening and how to fix it?

Thanks :)

lavazza

10:05 pm on Mar 9, 2009 (gmt 0)

It could be that your pages are FOUCed

Google: Results 1 - 10 of about 7,340 for "Flash of Unstyled Content" [google.com]

g1smd

10:08 pm on Mar 9, 2009 (gmt 0)

Is it because the HTML content has loaded before the stylesheet has, or the content is not ordered in the source code in the same order that it is displayed?

Gemini23

10:12 pm on Mar 9, 2009 (gmt 0)

Just to say that it does NOT show html code... the telephone number and brief text that displays shows as it does on the normal web page. ie. at the bottom of the page...

swa66

1:16 am on Mar 10, 2009 (gmt 0)

Although I've no clue what DWT means in your context, you might very well be describing FOUC. FOUC stands for "flash on unstyled content". Basically the page is shown as if there was no CSS applied to it, till the stylesheet kicks in and does style it properly.

Is your CSS included with a link or with an @import ?

If the latter, try shifting to the <link> as it tends to be less prone to FOUC.

lavazza

1:27 am on Mar 10, 2009 (gmt 0)

DWT = DreamWeaver Template ? ? ?

Gemini23

2:05 pm on Mar 10, 2009 (gmt 0)

DWT stands for Dynamic Web template and is using Microsoft Express 2 (I had previously used Dreamweaver.

I am not sure about the CSS link or how to set that up. The style currently used is shown as <style type="text/css">

any suggestions gratefully received.. :)

[edited by: Gemini23 at 2:08 pm (utc) on Mar. 10, 2009]

swa66

12:26 am on Mar 11, 2009 (gmt 0)

Option 1:

Option 2:

The second one if more likely to suffer from FOUC.

Gemini23

9:38 am on Mar 11, 2009 (gmt 0)

Hi swa66. Thanks for your comment. What exactly does the above Option 1 do? and how do I enter that? Do I simply replace the <style type="text/css"> that I currently have with
<link rel="stylesheet" href="style.css" type="text/css">

I guess that is assuming that I have a css called .css

g1smd

9:44 am on Mar 11, 2009 (gmt 0)

If your CSS is laid out in the head of your page, cut it out to an external file so that the same code can be used by every page of your site. That makes things easier to maintain, as well as saving a bit of bandwidth on every page view.

Gemini23

11:09 am on Mar 11, 2009 (gmt 0)

Hi, each web page begins as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>xyz</title>
<meta content="xyz" name="description">
<meta content="name="keywords">
<meta content=" All rights reserved." name="copyright">
<style type="text/css">

How do I amend/correct that? or is it the css that is attached to the DWT template or the DWT template that needs editing?