0

Does anyone know how I can style dynamic elements created via the DOM method createElement in IE7 with CSS.

As some of you may or may not already know, IE7 seems to refuse to style elements that are created using the DOM api but will quite happily style them using innerHTML.

It seems to be a bug with IE7 only as IE8 has no problem with styling these dynamic elements.

On GitHub I forked this repo: https://github.com/ChiperSoft/Kalendae and wanted to convert it to support IE7 (it states it only supports IE8 but at first I noticed some basic things I could fix to get it working in IE7 and then I realised the main problem supported IE7 was again due to this bug where IE7 chokes on dynamic elements).

(for the sake of experiment...) I tried loading the CSS after the script had finished (just as a way to test to see if IE7 would render the styles for the DOM created elements) but that didn't work.

And it's not possible to create these dynamic elements via innerHTML because of the requirements of the script and the dynamic nature of the elements (it's a date picker script).

So ultimately I need to try and work out how to fix this bug with IE7.

Any ideas?

Kind regards, Mark

Integralist
  • 2,161
  • 1
  • 32
  • 50
  • I can give you an advice. `If you want something to be done well, do it using jQuery`. This library was created with intension to overcome exactly these bugs. – Oybek Mar 10 '12 at 14:40
  • Oybek: jQuery isn't universal cure ... as it is made by other people with bugs and is good only for small-medium web-sites (Where there isn't much javascript) ... and at last, if it works in jQuery it will work in plain JavaScript – SergeS Mar 10 '12 at 14:43
  • Can you show, how you add elements ? ( I tried it now on my own project and it works correctly ) – SergeS Mar 10 '12 at 14:45
  • Dear OP, please post the code that is not working on I.E. and I'll make it work using jQuery – Oybek Mar 10 '12 at 14:46
  • The [following code](http://jsfiddle.net/42S7x/) seems to work fine. (Tested in compatability mode) – Oybek Mar 10 '12 at 14:56
  • Dynamically created elements can *absolutely* be styled in IE7. That could be done in IE4! Please post a code snippet where a dynamically created element is not styled appropriately in IE7. – gilly3 Mar 10 '12 at 16:45
  • For those stating that "dynamically created elements can be styled in IE7" and who want to see an example of this happening... let me clarify that I know IE7 can style dynamic elements, but once you start generating very complex elements with multiple sub/sub elements (all created dynamically using the DOM API and not innerHTML) then IE7 will not style them. Look at the repo https://github.com/ChiperSoft/Kalendae (you'll need to fix up the 3 issues that make it not work in IE7 and then you'll see the issue with IE7 not able to render the CSS for these elements). This is a known issue with IE7. – Integralist Mar 11 '12 at 19:50
  • I've also seen some people suggest the solution of 'apply the styles via script', that's a terrible performance compromise that I'm not willing to accept (compared to assigning the dynamic element a single className). I'm going to try a couple of the other suggestions below and see what happens. – Integralist Mar 11 '12 at 19:53
  • UPDATE: here is an IE7 branch for you to test from: https://github.com/Integralist/Kalendae/tree/IE7 the issue is trying to get the elements to be styled. – Integralist Mar 12 '12 at 12:00
  • I tried both Marat Tanalin's suggestion of trying to cause a reflow, as well as Chris Gessler's suggestion of appending to a div already in the page - neither worked. – Integralist Mar 12 '12 at 12:01

3 Answers3

1

I had this issue before but I was trying to submit a dynamically added form element... basically, your elements aren't rendering. Try adding them to a container. I can't remember off hand, but I believe I used a dynamically added DIV tag as my container.

EDIT

Yep... I was correct. You need to append the new element to a DIV. See this question/answer javascript createElement(), style problem

Community
  • 1
  • 1
Chris Gessler
  • 22,727
  • 7
  • 57
  • 83
0

Interesting trick to handle dynamic or on load hidden elements

IE 7 will work fine on the first li page if you use jQuery selector like this:

$('.active').children('.image');

HTML:

<li class=active">
<li class="hidden">
<li class="hidden">
<li class="hidden">
<li class="hidden">

However, IE 7 stop seeing second LI children elements

<li class=hidden">
<li class="active">
<li class="hidden">
<li class="hidden">
<li class="hidden">

so now this is useless:

$('.active').children('.image');  //log returns null in IE7

I found that if you define selector like this IE7 start functioning as "NORMAL" browser

$('.active .image');
0

After adding an element, try to force page redraw with following trick:

document.body.className = document.body.className;
Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52