12

Is there a known issue with IE(7 and 8) where jquery .load() doens't function properly? My CSS isn't getting loaded onto the page. Here is my code :

This is the file which is being loaded(show_profile.php) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" script="text/css" href="profile.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div id="tabs"><div id="cd" class="tab_active">Contact Details</div>
</div>
</body>
</html>

This is the code for profile.css 

#tabs {
color:white;
font-family:Verdana;
font-size:14px;
}

#cd{
position:absolute;
left:0px;
top:0px;
background-color:#3172A6;
}
.tab {
position:absolute;
top:0px;
}
.tab_active {
position:absolute;
top:0px;
}

On viewing the file show_profile.php independently , everything including the CSS is alright, but it just wont work when i use .load()

Please Help :(

Hormigas
  • 1,429
  • 5
  • 24
  • 45
  • 1
    What are you loading it into? An existing element? Maybe you should use `load('show_profile.php body')` and then load the CSS separately. – alex Jun 21 '11 at 04:17
  • Thanks for repsonding alex. load('show_profile.php body') doesn't seem to load anything at all now. – Hormigas Jun 21 '11 at 04:24
  • @alex and the thing is, my code works perfectly with google chrome and firefox – Hormigas Jun 21 '11 at 04:25

3 Answers3

6

The css is coming from a header of the main document, not whatever you're loading. You can either use inline styling on the page you're loading using load(0 or specify style in some css (or using style tags) in the document that loads it.

AR.
  • 1,935
  • 1
  • 11
  • 14
  • thanks for the answer. inline styling works, but even if i shift the contents of profile.css to the header portion of the file into which show_profile.php is being loaded, it doesn't seem to have any effect whatsoever :| – Hormigas Jun 21 '11 at 04:22
  • @AR and my code works perfectly with other browsers, so any way to get around this with IE ? Thanks – Hormigas Jun 21 '11 at 04:27
  • Take a look here http://stackoverflow.com/questions/5186638/how-to-asynchronously-load-css-using-jquery - maybe appending css link will indeed fly, not sure. Also take a look at second anser here: http://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery I use inline styling for pages loaded using (load) and I don't have any headers or body or html tags for them, just divs and stuff. – AR. Jun 21 '11 at 04:38
  • I tried that before posting this question. But it didn't help :( Anyways, i really appreciate your help. – Hormigas Jun 21 '11 at 04:47
2

The answer provided is correct in its entirety. The issue is because you have a page (call it A.php) that is loading this page (B.php) and the style sheet you want is only listed in B.php. This works in other browsers because they are a little more lenient on what they allow in the DOM. IE is very strict about what it does and does not do with this. The answer is to include <link rel="stylesheet" script="text/css" href="profile.css" /> in A.php

kasdega
  • 18,396
  • 12
  • 45
  • 89
1

The link element does not have a script attribute - it should be type="text/css".

David Lantner
  • 561
  • 2
  • 10