SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML displays before CSS downloads in Opera

    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/.
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by trenton
    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
    Hello World

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.S. Thanks for the really good quirks explanation too, Paul
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)

  8. #8
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    trenton, have you tried importing the stylesheet this way:
    Code:
    <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.

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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?
    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
    Hello World

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    London
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Webcredible for usability & accessibility.
    Read all about the Disability Discrimination Act (DDA)

  11. #11
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Hello World


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •