HTML displays before CSS downloads in Opera

[trenton]

Hi

I've just finished off a CSS/XHTML website that works in all browsers (except NN4, but that's OK). I've now had to convert it down to HTML 4.0 (it's a long story) but I can't seem to get it working properly now:

1. In Opera (and only Opera) the HTML page displays as plain text and then a couple of seconds later the CSS kicks in and moves it all around to the correct position. I have no idea why.

2. In IE6 the content is moved to the left when it should be in the middle. Again I have no idea why.

Any HTML 4.0 experts out there who can help? The URL's http://www.webcredible.co.uk/programmers/.

[Paul O'B]

Hi,

I don't know about problem 1 but problem 2 is caused by not using a doctype and coding in quirks mode.

Ie5 ie5.5. and ie6 in quirks mode don't understand that margin-left:auto and margin-right:auto are supposed to center an element.

Instead thet incorrectly use text-align:center on a parent element and will not onlt center text but will also center nested block level elements.

To centre your page you therefore need both methods.

e.g.

body {text-align:center;color:#000; background:#fff; 
#body {text-align:left;width:780px; margin-left:auto; margin-right:auto; position:relative; top:0}

Hope that helps.

Paul

[trenton]

Thanks, Paul, that's fixed the centering problem. Could you explain what you mean by quirks mode and why the document is coded in quirks mode?

Trenton

[Paul O'B]

Could you explain what you mean by quirks mode and why the document is coded in quirks mode?

Hmmm - have you got all day

Well basically browsers that don't have a doctype or partial doctype (without uri) work in what's known as quirks mode.

That is they don't work to any standard and try to support legacy and proprietary behaviour and deprecated code.

Obviously different browsers have different quirks and this makes it difficult to maintain a consistent behaviour between browsers.

In standards mode (enabled bu using a full doctype) browsers should work to a known standard and apply the mark up consistently. While this is not quite true for ie as is still does a lot of things its own way it is still much better than quirks mode.

In quirks mode IE uses the broken box model for css layout where padding and borders are kept inside an elements specified width. While sometimes this may be the desired way to work its not actually correct according to standards and all other browers will add the padding and borders to the width of an element to achieve a larger overall size.

There are many other things that ie in quirks mode does, such as the centering problem that you already found about.

In reality id doen't matter if you code in quirks mode or not as long as you take into account the differences that exist between ie in quirks mode and other browsers.

Read more about it here in this good articel by eric meyer.

http://www.ericmeyeroncss.com/bonus/render-mode.html

Paul

[DougBTX]

1. In Opera (and only Opera) the HTML page displays as plain text and then a couple of seconds later the CSS kicks in and moves it all around to the correct position. I have no idea why.

Opera starts drawing the page one second after you click a URL, so if it doesn't have the CSS file by then, you don't see any CSS untill that is finished downloading. The length of time Opera waits can be set in preferences, but one second is the default.

Trying to slim down your page might help, but probably won't as it depends on how fast your internet connection is and how responsive your host is more than anything else.

Regards,
Douglas

[trenton]

Thanks, Douglas, but this wasn't a problem when the document was in XHTML - now that it's HTML 4.0 it is a problem. Any thoughts?

[trenton]

P.S. Thanks for the really good quirks explanation too, Paul

[Egor]

trenton, have you tried importing the stylesheet this way:

<style type="text/css" media="screen">
@import url(style.css);
</style>

I am just making a wild guess here, but who knows maybe it will solve the problem.

[DougBTX]

Thanks, Douglas, but this wasn't a problem when the document was in XHTML - now that it's HTML 4.0 it is a problem. Any thoughts?

Well, how reproducable is the problem? Is it only when the pages are online, or do you get the same problem offline? Was the doctype all you changed?

Which version of Opera are you using?

I've tried it in Opera 7.5, 7.23 and 6.05 and have still to see the unstyled content.

Regards,
Douglas

[trenton]

The problem only occurs online for me in Opera 7.23 for me - strange you don't get it... When I converted it into HTMl 4.0 I changed the doctype, got rid of the ISO statement in the head and removed all the /s. Hey, you can see the XHTML version at http://www.webcredible.co.uk/program...ndex-xhtml.htm. There's probably nothing we can do, perhaps it's just a browser bug (only on my browser though!). Thanks for all your help, Doug.

[DougBTX]

Hmm, you could try running it past the Opera forums if you still want a solution: http://my.opera.com/forums/forumdisp...?s=&forumid=27

There are generally helpful people there for Opera specific issues.

Douglas