Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #17713 > unrolled thread

Adding style in IE8

Back to article view | Back to comp.lang.javascript

Contents

  Adding style in IE8 "Tom de Neef" <tdeneef@qolor.nl> - 2012-12-15 20:03 +0100
    Re: Adding style in IE8 "Tom de Neef" <tdeneef@qolor.nl> - 2012-12-16 13:21 +0100
      Re: Adding style in IE8 "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-12-16 14:44 +0200
        Re: Adding style in IE8 "Tom de Neef" <tdeneef@qolor.nl> - 2012-12-16 23:07 +0100

#17713 — Adding style in IE8

I try to add styles dynamically, using following code:
{code}
  var style = document.createElement('style');
  style.type = 'text/css';
  if(style.styleSheet){ // IE8+
     style.styleSheet.addRule(selector,definition,0)
//    style.styleSheet.cssText = rule
  }
  else { //FF, Chrome
    style.appendChild(document.createTextNode(rule))
  };
  docHead.appendChild(style)
}
{/code}

( where rule = selector+'{'+definition+'}' )
No problem in FF and Chrome but I can't get it to work in IE8.
Tried 'addRule' as well as assign cssText. To no avail.
When I inspect the properties of style.styleSheet I notice that cssText and 
innerHTML have some funny characters around the brackets, that are not 
present in the rule that I provide. But that may be a red herring.
I would appreciate suggestions or alternative code.
Tom

[toc] | [next] | [standalone]

#17719

Don't bother. This seems to be a CSS issue rather than a script problem.
I apply styles to cells in a table as well as to the rows of the table.
In FF and Chrome the row styles supercede the cell styles while in IE the 
row styles 'get lost'.
Tom

[toc] | [prev] | [next] | [standalone]

#17720

2012-12-16 14:21, Tom de Neef wrote:

> Don't bother.

With what?

> This seems to be a CSS issue rather than a script problem.
> I apply styles to cells in a table as well as to the rows of the table.
> In FF and Chrome the row styles supercede the cell styles while in IE the
> row styles 'get lost'.

If that is "this", then it is really a CSS issue, namely a bug in CSS 
implementation in FF and Chrome. But your analysis is probably wrong.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#17723

"Jukka K. Korpela" wrote
[..]
>> This seems to be a CSS issue rather than a script problem.
>> I apply styles to cells in a table as well as to the rows of the table.
>> In FF and Chrome the row styles supercede the cell styles while in IE the
>> row styles 'get lost'.
>
> If that is "this", then it is really a CSS issue, namely a bug in CSS 
> implementation in FF and Chrome. But your analysis is probably wrong.

Sorry, I was unclear, thought I had pinpointed my problem and felt it was no 
longer appropriate for this NG.
Looking at it further I have discovered that there is a problem with 
dynamically storing styles in IE8.
The code I posted in the original post creates 'style' nodes, assignes the 
definition (received from a server) and adds such node to the DOM.
The script later assignes className properties for cells and rows in a table 
(not shown). In FF and Chrome this resulted in the intended formatting of 
the table. In IE8 the row formats seemed to be lost.

It took a while before I could reproduce this behaviour in a test 
environment without server. That is - as it now turns out - because the 
problem has to do with size. The table I was working with (supplied by a 
customer) was rather big. It required storing styles for 70 columns (to be 
applied to all cells in the column) and 2 (even and odd) for rows. When I 
reduce the table so that only 26 column styles plus 2 row styles are needed, 
IE does fine. With 27 column styles plus rowEven plus rowOdd, the rowOdd 
style is not applied. With 28 column styles both row styles get lost. 
Apparently IE does not manage the styles beyond nr 28. This number is in 
itself insignificant because there are also 'fixed' styles loaded from 
stylesheets.

The fact that the server message had the definition of the rowEven and 
rowOdd styles after the definition of all the column styles led to my 
mis-interpretation of the problem. Columns 28 and higher where off-screen 
and the lack of their formatting went unnoticed. But it showed up in the 
rows.

I now have to find a work-around. (The table was supplied by a client - he 
needs the columns.)
Tom 

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web