Jump to content

CSS in IE8 not rendering but FF does...


jsatan
 Share

Recommended Posts

Hi all. I hope this is a really simple one:I have a php page that has nothing on it apart from the javascript and CSS files to load in the header. The javascript does all the work for the page (ajax) EG creating the layout etc. So in this javascript file I have a few divs created on the fly from input from a DB. These divs are then classed (

divTag_open.className="Open";

). My CSS has the following:

.Open{color:#FF0033;}

But the text inside these divs will never be coloured as they should. In FF it works but not IE8 (not tested in 7), if I create a test div in the php file this will be rendered correctly. I can post more code on request, just wondering if this is a known "gotta ya". Jon.

Link to comment
Share on other sites

Here the snippets of code (duplications of the same type of statements has been removed to shorten)JS

function createDisplay(){  var div_displyer            = document.createElement("table");  var div_tbody               = document.createElement("tbody");  var divTag_p1_open          = document.createElement("div");  divTag_p1_open.id           = 'DIV_P1_Open';    divTag_p1_open.className    = "P1_Open";    document.body.appendChild(div_displyer);  div_displyer.appendChild(div_tbody);     div_tbody.appendChild(divTag_p1_open);  }

CSS

.P1_Open{color:#FF0033;}

Link to comment
Share on other sites

just guessing here, is the javascript run before table and divs are created? then this may be the problem, it can't add a class to objects that have not been rendered yet!
Just tested this (see above code) to make sure this wasnt the issue. Same outcome creating the table within JS rather than in php (on a side note the reason the table tags were created in php was just due to this being a starter project, nobish).
Link to comment
Share on other sites

(this table tag is created in the php)
php or javascript?anyway quickly put this together<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function createDisplay(){var div_displyer = document.createElement("table");var div_tbody = document.createElement("tbody");var divTag_p1_open = document.createElement("div");divTag_p1_open.id = 'DIV_P1_Open'; //assign to 1 div only, must be uniquediv_displyer.style.borderWidth="1px";div_displyer.style.borderColor="black";div_displyer.style.borderStyle="solid";divTag_p1_open.className = "P1_Open";divTag_p1_open.innerHTML="hello world";document.body.appendChild(div_displyer);div_displyer.appendChild(div_tbody);div_tr=div_tbody.appendChild(document.createElement('tr'))div_td=div_tr.appendChild(document.createElement('td'))div_td.appendChild(divTag_p1_open);}window.onload=createDisplay;/*--*//*]]>*/</script> <style type="text/css">.P1_Open{color:#FF0033;}</style></head><body></body></html>
Link to comment
Share on other sites

the table WAS creted in the php page, but I changed this to JS. I'll create those pages in a moment.A question while I'm doing this, the only difference bewteen our two codes (apsrt from you've populated the div with information to view) is you have set the sytles in JS rather than a new CSS. BRB.

Link to comment
Share on other sites

I just now tested your code with population of div in ie8, ie7, firefox and it works fine? how did start the function with window.onload like i had done?
I didnt load it in the same way as you:I used the following in my php code:echo "<body onload=\"java script:firstLoad();\">";The function "firstload" runs the createDisplay function. I'm using separate files so my JS isnt on the php page but rather a link in the header to the JS file. I'll be back. Edited by Jontelling
Link to comment
Share on other sites

OK! apparently it does not work in IE7i create div <div class="P1_Open" id="DIV_P1_Open">hello world1</div> in bodyand innerHtml in javascript to read "hello world2" both show in firefox and ie8, but only "hello world1" in ie7 (with and without id ref) will show.if you create tr td elements within table as i had done, it now works fine.

Link to comment
Share on other sites

I do use TR and TD later when populating the areas. I've not forgotten them in my code, as for not showing in IE8, try adding your tbody, I had a few issues with it not showing at all until then. This is the function that is called later to populate the divs. As you may have guessed the divs that I have the CSS for are only used for styling.

function createCallDisplay(in_call_id, in_reference, in_description, in_call_type, in_call_state){  document.getElementById('calls_state').innerHTML     = " ";  var div_displyer    = document.getElementById('DIV_'+in_call_type+'_'+in_call_state);  var tr1             = document.createElement('TR');  var td1             = document.createElement('TD');   var td2             = document.createElement('TD');  var td3             = document.createElement('TD');  var td4             = document.createElement('TD');  var divTag          = document.createElement("div");                 divTag.id = 'call_id_'+in_call_id;  td1.innerHTML = in_reference;  td2.innerHTML = in_description;  td3.innerHTML = in_call_type;  td4.innerHTML = in_call_state;  div_displyer.appendChild(divTag);       divTag.appendChild(tr1);    tr1.appendChild(td1);  tr1.appendChild(td2);  tr1.appendChild(td3);  tr1.appendChild(td4);}

Any more ideas?

Link to comment
Share on other sites

Right! apparently according to javascript tables you cannot just append <tr> elements into a <table> element in IE (relates to -IE7 at time) it has to be appended within a <tbody> element.so that is one problem, as you have no tbody, and you don't have table either source code below<div id="calls_state">Im now empty space</div><div id="DIV_in_call_type_in_call_state"><div id="call_id_in_call_id"><tr><td>in_reference</td><td>in_description</td><td>in_call_type</td><td>in_call_state</td></tr></div></div>so by adding and changing to below it now works.function createCallDisplay(in_call_id, in_reference, in_description, in_call_type, in_call_state){document.getElementById('calls_state').innerHTML = "Im now empty space";var div_displyer = document.getElementById('DIV_'+in_call_type+'_'+in_call_state);var tBod = document.createElement('TBODY');var tr1 = document.createElement('TR');var td1 = document.createElement('TD');var td2 = document.createElement('TD');var td3 = document.createElement('TD');var td4 = document.createElement('TD');var divTag = document.createElement('TABLE');divTag.id = 'call_id_'+in_call_id;div_displyer.appendChild(divTag);divTag.appendChild(tBod)tBod.appendChild(tr1);tr1.appendChild(td1);tr1.appendChild(td2);tr1.appendChild(td3);tr1.appendChild(td4);td1.innerHTML = in_reference;td2.innerHTML = in_description;td3.innerHTML = in_call_type;td4.innerHTML = in_call_state;}

Link to comment
Share on other sites

in firefox, select all, right click and pick 'view selection source' it will show you what the javascript has created.the coding i have provided, produces table, tbody, tr, td and works in FF, IE6 to 8.
This is taken from firebug (FF plugin for debugging) I've altered the layout to make it readable.
<div id="calls_state"> </div><div id="DIV_system_message"> </div><table id="DIV_table"><tbody><div class="P1_Open" id="DIV_P1_Open"><div id="call_id_2"><tr><td>another test</td><td>another test desc</td><td>P1</td><td>Open</td></tr></div><div id="call_id_3"><tr><td>another test no ref</td><td>another test no desc</td><td>P1</td><td>Open</td></tr></div></div><div class="P2_Open" id="DIV_P2_Open"></div><div class="P1_Suspended" id="DIV_P1_Suspended"></div><div class="P2_Suspended" id="DIV_P2_Suspended"><div id="call_id_1"><tr><td>Testing r</td><td>testing description</td><td>P2</td><td>Suspended</td></tr></div></div><div class="P1_Resolved" id="DIV_P1_Resolved"><div id="call_id_5"><tr><td>gfhgfhfgh</td><td>gfhgfh</td><td>P1</td><td>Resolved</td></tr></div></div><div class="P2_Resolved" id="DIV_P2_Resolved"></div><div class="Ongoing" id="DIV_Ongoing"></div><div class="Problem" id="DIV_Problem"></div></tbody></table>

Link to comment
Share on other sites

you can't have div's anywhere but between <td></td> within a table, so this might be the problem.its looking for <tbody> before <tr> tag, but finding <div> instead, try assigning call_id_# to <tr> tag instead, and then place <div class="P1_Open" id="DIV_P1_Open"> outside the table, and create table/tbody/tr/td within it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...