tags:

views:

45

answers:

2

Its strange but when I add a form to my page, firefox seems to load the whole page first, then apply the style only after the page is fully loaded.

This behaviour is only in FireFox, and not in IE.

And only happens when I include a form.

Any ideas how to fix it?

this is the simplified document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <title>My sites title</title>
</head>
<body leftmargin="0" rightmargin="0" topmargin="0">
  <h1>Contact Us</h1></td>

                             <form method="POST" action="mailer.php">
                            <input type="text" name="name" size="19"><br>
   <br>
   <input type="text" name="email" size="19"><br>
   <br>
   <textarea rows="9" name="message" cols="30"></textarea>
   <br>
   <br>
   <input type="submit" value="Submit" name="submit">
                        </form> 

    <br />&nbsp;
</body>
</html>
A: 

I'm going to answer the question here for the next guy: It turns out the issue is not firefox, rather the dreadfully slow asp.net development server, serving pages at a snails pace. For some reason IE seems to not be effected by this, I guess being of caching.

Its just strange how only after a form is added, does this behavior become noticeable.

JL
+1  A: 

Try turning on caching for the CSS file. To me it looks like the issue is probably related to the fact that Internet Explorer aggressively caches things it shouldn't, and Firefox caches only things it has to; the CSS file likely isn't loaded before the page HTML (not with a page that small anyway), and as such causes a visual redraw that you can visibly see.

If you want specifics for this, try looking at Yahoo Developer's excellent tips on caching at http://developer.yahoo.com/performance/rules.html#expires.

Also, try removing the random </td> that appears after the <h1> closing tag. If ever in doubt about somthing HTML-wise, validate, validate, validate! ;]

Nathan Kleyn