HTML ghosting when using browser dependent stylesheets

[SOLVED] Decided to use PHP to detect the browser; solution below. FYI - This is issue is known as flash of unstyled text, or FOST.

 <?php
        
        $browser = get_browser(null, false);
        
        // Get browser name
        $bname = $browser->browser;
        $bmaker = $browser->browser_maker;
        
                // Check if IE
                if (preg_match('/IE/i', $bname)) {
                        if (preg_match('/Microsoft/i', $bmaker)) {
                                $myBrowser = "IE";
                        }
                }
                // Check if Chrome
                else if (preg_match('/Chrome/i', $bname)) {
                        if (preg_match('/Google/i', $bmaker)) {
                                $myBrowser = "Chrome";
                        }
                }
                // Check if Firefox
                else if (preg_match('/Firefox/i', $bname)) {
                        if (preg_match('/Mozilla/i', $bmaker)) {
                                $myBrowser = "Firefox";
                        }
                }
                // Other
                else {
                        $myBrowser = "Other";
                }
        
                // Que correct css stylesheet based on browser version
                $css = "";
                
                if ($myBrowser == "IE") {
                        $css = 'light3.css';
                }
                else if ($myBrowser == "Chrome") {
                        $css = 'medium3.css';
                }
                else if ($myBrowser == "Firefox") {
                        $css = 'dark3.css';
                }
                else if ($myBrowser == "Other") {
                        $css = "dark3.css";
                }
        
        
     <<<_END
                
        <!DOCTYPE html>   
        <html>
        <head>
        
                <!-- link css file -->
                <link id="myStyle" rel="stylesheet" type="text/css" href="http://localhost/$css" />
                
        </head>
        <body>
        
                <div id="shell">a
                
                        <div id="inner1">b</div>
                        
                        <div id="inner2">c</div>
                        
                </div>
        
        </body>
        </html>
                
     _END;
        
 ?>




I'm working on a project for work and want to make sure it's compatible with Chrome, Firefox and IE. Through testing I'm noticing subtle differences mostly between Firefox and IE. Instead of compromising and just using a single stylesheet that mostly works I decided to use browser specific stylesheets. I'm guessing because since there isn't a stylesheet loaded immediately, rather a call is first made to a Javascript file which then determines what stylesheet to use, is what is causing the ghosting to occur. What I mean by ghosting is, you can see the HTML version of the page for a fraction of a second before the CSS is applied. This only seems to be an issue when you're already on the page and you hit refresh, because upon initial load it doesn't seem to be noticeable.

HTML

<html>
<head>

     <!-- link css file -->   		   
     <link id="myStyle" rel="stylesheet" type="text/css" href="http://localhost/" />

     <!-- link js file -->
     <script type="text/javascript" src="http://localhost/detect.js"></script>
	
</head>
<body>

     <!-- HTML stuff goes here -->

</body>
</html>

Javascript

var setStyle = document.getElementById('myStyle');
    
window.onload = function() {
    	 	
     setStylesheet();
    	 
}

function setStylesheet() { 
	
     if (navigator.userAgent.indexOf("Chrome") != -1 ) 
     {
	   setStyle.setAttribute('href', "http://localhost/dark.css");
     }
     else 
     {
          // load default stylesheet
     }
	    
}

Any suggestions?

Nice work. Glad you could solve it yourself! Cross browser responsive design has become pretty tedious.