By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,921 Members | 1,433 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,921 IT Pros & Developers. It's quick & easy.

page ugly before css is loaded

P: n/a
Hi, I developed a site and used css. I put almost all style
information in the css and used a lot of "id=my_css_class" in the
html. They is little style specification in the html. I found that on
some computers with slow internet links this seems to be a small
problem. Looks like the html page was loaded first and displayed in a
very ugly layout because the css has not be loaded yet. Then the css
was loaded and the page became beautiful. This may take only one
second but the viewer can see clearly the ugly page. I think it can be
improved. Yahoo uses css and I never saw the ugly page.

Can I ask the css be load first so the ugly page will not be shown? Is
it better to put more style specification in the html file, some thing
like

<table sytle="boder:0px; ...;">
....

Thank you very much.

qq
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Quoth the raven named Quick Function:
Hi, I developed a site and used css. I put almost all style
information in the css and used a lot of "id=my_css_class" in the
html. They is little style specification in the html. I found that
on some computers with slow internet links this seems to be a small
problem. Looks like the html page was loaded first and displayed
in a very ugly layout because the css has not be loaded yet. Then
the css was loaded and the page became beautiful. This may take
only one second but the viewer can see clearly the ugly page. I
think it can be improved. Yahoo uses css and I never saw the ugly
page.
This page should answer your questions. It's an IE thing.
http://www.bluerobot.com/web/css/fouc.asp
Can I ask the css be load first so the ugly page will not be shown?
Is it better to put more style specification in the html file, some
thing like

<table sytle="boder:0px; ...;"> ...


No, you should keep your presentation in the CSS file.

What's your URL?

--
-bts
-This space intentionally left blank.
Jul 20 '05 #2

P: n/a
Quoth the raven named Quick Function:
Hi, I developed a site and used css. I put almost all style
information in the css and used a lot of "id=my_css_class" in the
html. They is little style specification in the html. I found that
on some computers with slow internet links this seems to be a small
problem. Looks like the html page was loaded first and displayed
in a very ugly layout because the css has not be loaded yet. Then
the css was loaded and the page became beautiful. This may take
only one second but the viewer can see clearly the ugly page. I
think it can be improved. Yahoo uses css and I never saw the ugly
page.
This page should answer your questions. It's an IE thing.
http://www.bluerobot.com/web/css/fouc.asp
Can I ask the css be load first so the ugly page will not be shown?
Is it better to put more style specification in the html file, some
thing like

<table sytle="boder:0px; ...;"> ...


No, you should keep your presentation in the CSS file.

What's your URL?

--
-bts
-This space intentionally left blank.
Jul 20 '05 #3

P: n/a
On Sat, 24 Apr 2004 15:48:54 GMT, "Beauregard T. Shagnasty"
<a.*********@example.invalid> wrote:
Quoth the raven named Quick Function: [...]
I found that on some computers with slow internet links
this seems to be a small problem. Looks like the html
page was loaded first and displayed in a very ugly layout
because the css has not be loaded yet. [...]
This page should answer your questions. It's an IE thing.
http://www.bluerobot.com/web/css/fouc.asp

Can I ask the css be load first so the ugly page will
not be shown?


No, this is not something that you can "control" from the user side.

Even if the suggested page at 'bluerobot' gives an explanation for
something that might be seen as an "inconvenience" in the behavior of
MS-IE, that behavior can not be labeled as an error.

Ask yourself; how long should the user agent really have to wait for the
CSS document, until it starts rendering what it have got already in the
form of marked up content? 1 second? 10 seconds? half an hour? forever?

For the case of CSS; it's an _optional_ addition to a marked up document
and there is no rule at all that says it must be made available.

The background of this "behavior" is to be found in how an HTTP
transaction is defined to take place. Each and every HTTP transaction is
its own process that knows nothing about any other HTTP transaction that
might be running in parallel and it's in fact simplicity spelled out.

User agent sends an HTTP request to a server asking
for a resource to be served.
An HTTP connection is established.
The server serves the requested resource, and when done,
closes the HTTP connection. End of story.

Now there may be many different reasons for a resource linked from your
markup to be delayed in arrival into your UA.

Just a few examples;

The first, and most obvious; your UA must be allowed to get and parse at
least as much of your markup that is required to find out that it must
initiate more HTTP requests to get the rest of what is needed for a full
rendering.

Bigger size ISP's are running their service to customers out of computer
clusters [1] in which case there is no way for a customer to know
exactly how his web account has been physically distributed within the
cluster.

Following that, you may have one computer in a cluster that is readily
available to serve your markup, but when your UA makes the following
requests for additional resources, these may be physically stored on
some other computer in the cluster that just happens to be busy serving
content to other users and can not allocate the time slots your
resources needs at that time. Your extra resources will be served, but
with a delay.

Or even worse; your markup gets served but the cluster member computer
that holds your CSS document is temporary down for some reason and your
UA ends up waiting for some considerable time for e.g. your CSS
definitions.

Add to that each and every Internet proxy server that may be sitting in
your path between you and your ISP; and these proxies may have a will of
their own too when it comes to serving additional resources to your UA.

Please note that this line of reasoning holds true for all kinds of
extra resources requested from a UA, be that CSS, images, pdf's or
whatever.

The base line is; if you use HTTP requests for to get resources loaded
into your UA you must adopt a "live with the situation" approach.

Various UA's may have been programmed to handle HTTP transaction delays
in more or less convenient ways for the end user but this is nothing
that can be "controlled" by a page author. Don't think of "control" on
the server side either, it will not work good but just add insult to
injury.

--
Rex

[1] I don't think that Digital Equipment was the company that invented
the concept of "computer clusters" but they did run that concept to some
real heights with their VAX/VMS line of computers. A VAX cluster
appeared to the outside world as "one computer" but could in reality be
just about any number of physical machines in various locations.
Jul 20 '05 #4

P: n/a
On Sat, 24 Apr 2004 15:48:54 GMT, "Beauregard T. Shagnasty"
<a.*********@example.invalid> wrote:
Quoth the raven named Quick Function: [...]
I found that on some computers with slow internet links
this seems to be a small problem. Looks like the html
page was loaded first and displayed in a very ugly layout
because the css has not be loaded yet. [...]
This page should answer your questions. It's an IE thing.
http://www.bluerobot.com/web/css/fouc.asp

Can I ask the css be load first so the ugly page will
not be shown?


No, this is not something that you can "control" from the user side.

Even if the suggested page at 'bluerobot' gives an explanation for
something that might be seen as an "inconvenience" in the behavior of
MS-IE, that behavior can not be labeled as an error.

Ask yourself; how long should the user agent really have to wait for the
CSS document, until it starts rendering what it have got already in the
form of marked up content? 1 second? 10 seconds? half an hour? forever?

For the case of CSS; it's an _optional_ addition to a marked up document
and there is no rule at all that says it must be made available.

The background of this "behavior" is to be found in how an HTTP
transaction is defined to take place. Each and every HTTP transaction is
its own process that knows nothing about any other HTTP transaction that
might be running in parallel and it's in fact simplicity spelled out.

User agent sends an HTTP request to a server asking
for a resource to be served.
An HTTP connection is established.
The server serves the requested resource, and when done,
closes the HTTP connection. End of story.

Now there may be many different reasons for a resource linked from your
markup to be delayed in arrival into your UA.

Just a few examples;

The first, and most obvious; your UA must be allowed to get and parse at
least as much of your markup that is required to find out that it must
initiate more HTTP requests to get the rest of what is needed for a full
rendering.

Bigger size ISP's are running their service to customers out of computer
clusters [1] in which case there is no way for a customer to know
exactly how his web account has been physically distributed within the
cluster.

Following that, you may have one computer in a cluster that is readily
available to serve your markup, but when your UA makes the following
requests for additional resources, these may be physically stored on
some other computer in the cluster that just happens to be busy serving
content to other users and can not allocate the time slots your
resources needs at that time. Your extra resources will be served, but
with a delay.

Or even worse; your markup gets served but the cluster member computer
that holds your CSS document is temporary down for some reason and your
UA ends up waiting for some considerable time for e.g. your CSS
definitions.

Add to that each and every Internet proxy server that may be sitting in
your path between you and your ISP; and these proxies may have a will of
their own too when it comes to serving additional resources to your UA.

Please note that this line of reasoning holds true for all kinds of
extra resources requested from a UA, be that CSS, images, pdf's or
whatever.

The base line is; if you use HTTP requests for to get resources loaded
into your UA you must adopt a "live with the situation" approach.

Various UA's may have been programmed to handle HTTP transaction delays
in more or less convenient ways for the end user but this is nothing
that can be "controlled" by a page author. Don't think of "control" on
the server side either, it will not work good but just add insult to
injury.

--
Rex

[1] I don't think that Digital Equipment was the company that invented
the concept of "computer clusters" but they did run that concept to some
real heights with their VAX/VMS line of computers. A VAX cluster
appeared to the outside world as "one computer" but could in reality be
just about any number of physical machines in various locations.
Jul 20 '05 #5

P: n/a
In message <21**************************@posting.google.com >, Quick
Function <qu******@yahoo.com> writes
Hi, I developed a site and used css. I put almost all style
information in the css and used a lot of "id=my_css_class" in the
html. They is little style specification in the html. I found that on
some computers with slow internet links this seems to be a small
problem. Looks like the html page was loaded first and displayed in a
very ugly layout because the css has not be loaded yet. Then the css
was loaded and the page became beautiful. This may take only one
second but the viewer can see clearly the ugly page. I think it can be
improved. Yahoo uses css and I never saw the ugly page.

Can I ask the css be load first so the ugly page will not be shown? Is
it better to put more style specification in the html file, some thing
like

<table sytle="boder:0px; ...;">
...

Thank you very much.

qq


I assume that you only see this brief flash of un-styled content in
MSIE?

The way around this is to reference a second stylesheet before the main
one.

Looking at one of my own pages, I see:

-------------------------------------------------------------------------
-------

<link rel="stylesheet" href="./newbase.css" type="text/css"
media="screen">

<style type="text/css" media="screen, projection">
<!--
@import url("./new.css");
-->
</style>
-------------------------------------------------------------------------
-------

In this case 'newbase.css' just contains some fairly minimal formatting
for NS4.7x browsers.

So, just insert a reference to a second stylesheet before the main one.
(A near-empty one will do.)

regards.
--
Jake
Jul 20 '05 #6

P: n/a
In message <21**************************@posting.google.com >, Quick
Function <qu******@yahoo.com> writes
Hi, I developed a site and used css. I put almost all style
information in the css and used a lot of "id=my_css_class" in the
html. They is little style specification in the html. I found that on
some computers with slow internet links this seems to be a small
problem. Looks like the html page was loaded first and displayed in a
very ugly layout because the css has not be loaded yet. Then the css
was loaded and the page became beautiful. This may take only one
second but the viewer can see clearly the ugly page. I think it can be
improved. Yahoo uses css and I never saw the ugly page.

Can I ask the css be load first so the ugly page will not be shown? Is
it better to put more style specification in the html file, some thing
like

<table sytle="boder:0px; ...;">
...

Thank you very much.

qq


I assume that you only see this brief flash of un-styled content in
MSIE?

The way around this is to reference a second stylesheet before the main
one.

Looking at one of my own pages, I see:

-------------------------------------------------------------------------
-------

<link rel="stylesheet" href="./newbase.css" type="text/css"
media="screen">

<style type="text/css" media="screen, projection">
<!--
@import url("./new.css");
-->
</style>
-------------------------------------------------------------------------
-------

In this case 'newbase.css' just contains some fairly minimal formatting
for NS4.7x browsers.

So, just insert a reference to a second stylesheet before the main one.
(A near-empty one will do.)

regards.
--
Jake
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.