htmlcsssafarifouc

Flash of unstyled content

I've got a page with some content pulled down from a database in the body, up in the head i've got an external style sheet linked to format that content. On Safari (doesn't seem to happen on Chrome or Firefox) i'm getting a lovely flash of unstyled content.

I'd rather have a non-javascript fix for this, is there any way to position the external css sheet link so it gets applied before the php script runs in the body? - I would assume being at the top in head it would do this automatically, but apparently not in safari, any ideas?

<?php
require_once "../config/article_functions.php";
include "../widgets/topborder.html";
include "../widgets/banner.php";
include "../widgets/navbar.html";
?>

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://example.org/widgets/article.css">

<style type="text/css">
a:link {color: inherit;}      /* unvisited link */
a:visited {color: inherit;}  /* visited link */
a:hover {color: inherit;}  /* mouse over link */
a:active {color: inherit;}  /* selected link */

body, html {
    margin: 0;
    padding: 0;
    height:900px;
}

#container {
    width:990px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
}

#news_container {
    width:740px;
}

</style>
<title> TODO </title>

</head>
<body>
<div id="container">
    <?php include "../widgets/sidepanel.html"; ?>
    <div id = "news_container">
        <?php
            $uri = explode('/', $_GET['$url']);
            get_selected_news($uri[0]);
        ?>
    </div>
</div>
</body>
</html>

For a second or so i see this:

enter image description here

Then afterwards: enter image description here

Solution 
  • <?php
include "../widgets/topborder.html";
include "../widgets/navbar.html";
?>

<!DOCTYPE html>
<html>
<head>
…

    Bad boy! No wonder Safari is confused when it gets HTML before the doctype declaration. Maybe it even gets a closing </html> tag before it does see your stylesheet?