ansaurus

Question

Answer 1

+1 A:

In light of extra information, take 2...

Are the styles not being applied in the master HTML page or the page you're loading? If they're in the page you're loading it seems that IE strips out script and style tags from XMLHttpRequest objects.

Given that it's not that and I'm intrigued I constructed a sample:

<html>
<head>
<title>test</title>
<style type="text/css">
#girc-content { border: 1px solid black; width: 100px }
h3 { color: red; }
</style>
<script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
google.load("jquery", "1.3.2"); 
google.setOnLoadCallback(function() {
  $(document).ready(function() {
    $("#nav-home").click(function() {
      $("#girc-content").load("test2.html");
    });
  });
});
</script>
</head>
<body>
<div id="girc-content">
blah blah blah
</div>
<input type="button" value="click me" id="nav-home">
</body>
</html>

and test2.html:

<html>
<head>
</head>
<body>
<h3>This is a test</h3>
</body>
</html>

This works perfectly for me in IE8 standards and compatibility mode (sorry no IE7 any more).

I did notice when I copied your google onload snippet that you were missing some closing braces/parentheses. Was this just a cut and paste error or a problem with your Javascript? It might explain the inconsistent behaviour.

cletus 2009-03-27 10:48:19

I only reference the external style sheet in the static part of my page. The HTML which is loaded dynamically has no such references but uses the styles defined in the static portion. There is no script in the dynamic portion.

kenneedham 2009-03-27 11:23:50

You can revert IE8 back to 7 by using Tools > Developer Tools > Browser Mode > Internet Explorer 7. The IE team says that the mode is functionally identical to actual IE7, but apparently there are slight discrepencies.

Steerpike 2009-03-27 12:03:43

Ah I knew I'd heard about that somewhere. Tried that, same deal. works fine.

cletus 2009-03-27 12:11:37

I modified that code sample to look more like what I have and it still works in IE7.Which, I think, means there is something wrong with my CSS template.I should have thought of that earlier.The fact that the <h2> tage works but the <div> ones don't should have been a clue.Thanks for the help.

kenneedham 2009-03-27 12:11:54

Found it.I had a border="0"; in one of the stylesThe other browsers didn't seem to mind but IE just stopped applying any styles after that point.I'll give you the TICK as your questions prompted me to look in the right place.Thanks again

kenneedham 2009-03-27 12:27:08

Answer 2

A:

Try 'touching' the content again after you load it. The simplest way tends to just add a null string to the innerHTML

$("#nav-home").click(function() {
    $("#girc-content").load("home.html");
    $("#girc-content")[0].innerHTML += '';
});

Steerpike 2009-03-27 10:59:35

ansaurus

tags:

views:

answers:

Problem with IE7 JQuery, Ajax and CSS

related questions