Jump to content

CSS in IE8 not rendering but FF does...

jsatan

By jsatan
in CSS

Recommended Posts

jsatan Newbie

jsatan

Posted
Posted

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
jsatan Newbie

jsatan

Posted
  • Author
Posted

I'm half way to solving this riddle. The divs that I'm creating are created inside a table (this table tag is created in the php) seems if I create a new div outside this table tag I'm fine... I'll be back.

Link to comment
Share on other sites
jsatan Newbie

jsatan

Posted
  • Author
Posted

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
jsatan Newbie

jsatan

Posted
  • Author
Posted
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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted
(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
jsatan Newbie

jsatan

Posted
  • Author
Posted

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
jsatan Newbie

jsatan

Posted
  • Author
Posted
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.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
jsatan Newbie

jsatan

Posted
  • Author
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
jsatan Newbie

jsatan

Posted
  • Author
Posted
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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...