IE9 Loses Some CSS After Particular Form Submit

Question

The site I am editing has a search form. For the record, there are several other forms on the site, contact and the like. This is the only one with an issue.

Upon submission of the form, SOME of the styling is lost in IE9 (possibly other versions of IE, haven't tested that yet). Primarily, the margins and colors set in html and body appear to have been lost. Menus, banner, text, etc all appear to retain styles. All styles are on one sheet, that are used here...

Any helpful advice?

Here is the contents of the search page and the php used to check for the form, if that helps, and the css that I think is lost.

EDIT: The page is a search page, with almost nothing on it. A search reloads the same page, while displaying results from the search function. Thus, the same embedded sheets should be embedded, the same html is displayed as far as I can see... if this helps the discussion any. Still sifting to find some type of error. IE dev tools also seem to indicate that this error occurs in previous versions of IE as well, when viewed in IE7-8...

THE HTML:

<div id="search">
        <br />
            <div style="float:right;font-size:.8em;">
                <form name="form_sidesearch" action="search.html" method="post">
                <input type="hidden" name="action" value="search" />
                <input type="text" name="search_value" value="<?php echo $systems_primary->search_value ?>" />
                <input type="submit" name="submit_search" value="Search Website" />
                </form> <br />

            </div>
    </div>

<?php echo stripslashes($search_results);

THE PHP:

<?php

// -- Begin Search --------------------------------------------------------------------------------------
if($_REQUEST["action"] === "search")
{
  if(strlen($_REQUEST["pg"]) <= 0)
  {

  $_REQUEST["pg"] = 1;
  }

  $search_results = $systems_primary->search_website("index",urldecode($_REQUEST["search_value"]),"<div class=\"listing ui-corner-all\"><a href=\"{ENTRY_URL}\" title=\"{ENTRY_TITLE}\" class=\"listing_title\">{ENTRY_TITLE}</a>{ENTRY_CONTENT} <a href=\"{ENTRY_URL}\" title=\"{ENTRY_TITLE}\" style=\"font-size:.8em;\">...read more</a></div><br /><br />",345,"all",10,$_REQUEST["pg"]);
}

// -- End Search ----------------------------------------------------------------------------------------
?>

THE LOST CSS (could be more):

html {
background-color:#F6E6C8;
font-size:16px;
font-family:Helvetica;
}
body {
    width:1027px;
    margin:0 auto;
    background-color:#ffffff;
    font-family: arial, 'times new roman', sans-serif;
}

Elaboration: The actual thing that happens is that the page content as a whole is shifted left and remains left aligned instead of using the auto margins to stay centered. Additionally, the html background color is lost. The styles for the search fields are also lost or ignored. Not sure what else might be altered.

Answer 1

Typically when styling is lost after submitting a form, especially when it's an Ajax operation and not a full page reload, it's because there was some styling applied using JavaScript or jQuery that did not get reapplied when the updated portion of the page was reloaded. This could involve additional elements being created, or it could involve CSS classes being added to 1 or more elements.

This is especially likely to happen with the styling of HTML form elements, because in some cases heavy styling of certain form elements can only be done with the help of JavaScript or jQuery.

In such cases, identify the JavaScript or jQuery that styled the relevant content when the page first loaded, and then reapply it after the page has been updated (after an Ajax call has completed successfully, or after the browser has reloaded the page or loaded a new page).

Failing that, compare the HTML for the page before and after and see what changed. There may be a CSS class on the body tag or a container class that's not getting consistently set. If a new page is loaded, a different set of CSS files may be getting downloaded, or there may be an embedded style sheet that one page has but another does not.

Failing that, verify that the HTML and CSS are valid. Some browsers are more forgiving than others when rendering invalid code. What may seem like a browser bug could be caused by bad code.

If all of that turns up nothing and it seems increasingly likely that the problem is caused by an obscure browser bug, then reduce the code to the simplest possible state in which the problem can be consistently reproduced, and try to identify more clearly exactly what the nature of the bug is. This will make it easier to search for possible fixes and to ask for help. And in the course of reducing the code, if the problem suddenly disappears, the last code removed may turn out to be at least partly responsible for the problem.

Conversely, when it seems like there's no rhyme or reason to a problem, it's sometimes helpful to reimplement the code from scratch, to see if the problem still occurs. If the problem starts to occur at some point while writing the code, then likewise the last code that was added may be at least partly responsible for the problem.

Answer 2

You can do something like this...

$('#yourForm").on('submit',function(e){
 $(this).css({
 // reasign all the atributes you lost
 });
 e.preventDefault();
});