Web Analytics Made Easy -
StatCounter IE and CSS and innerHTML issues - CodingForum

Announcement

Collapse
No announcement yet.

IE and CSS and innerHTML issues

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • IE and CSS and innerHTML issues

    Hello

    I have this ajax based application.
    I am updating a div with content I get from server using ajax.
    Content is a table with divs etc...,

    I'm using innerHTML to load received code into a div container.
    The code I receive also contains a style definition area
    <style>
    .someclass{}
    <style>

    However, IE dont seems to take note of that and all content is inserted not formated accordingly.

    Do you know any tricks to force IE to care about all inner html I am inserting, including class definition for style?

    Thank you
    Cristian Rusu

  • #2
    Originally posted by Crirus View Post
    Hello
    However, IE dont seems to take note of that and all content is inserted not formated accordingly.
    ...

    I've built a demo code.
    Run this in both IE and FF to se what I mean.

    Code:
    <html>
    <head>
    <style type="text/css">
    #container {
    	width: 330px;
    	height: 400px;
    	padding: 10px;
    	background-color: #EEEEEE;
    	border: 1px solid #CCCCCC;
    	color: #000000;
    }
    </style>
    
    <script type="text/javascript">
    function addLayer() {
    	s="<style>.mainItem {padding-left: 5px;background-color: green;color: #ffffff;border: 1px solid #990000;}</style><div class='mainItem'>some text</div>";
    	document.getElementById('container').innerHTML=s;
    
    }
    </script>
    </head>
    
    <div id="container"></div>
    
    
    <a href="javascript:void(null)" onclick="addLayer();">test</a><br /><br />
    </body>
    </html>

    Comment


    • #3
      First off, why not just leave the style definitions in the page or in a separate css instead of trying to add them to the page dynamically?

      Second, why not try to use DOM methods instead of the non-standard innerHTML?

      Code:
      <html>
      <head>
      <style type="text/css">
      #container {
      	width: 330px;
      	height: 400px;
      	padding: 10px;
      	background-color: #EEEEEE;
      	border: 1px solid #CCCCCC;
      	color: #000000;
      }
      .mainItem {padding-left: 5px;background-color: green;color: #ffffff;border: 1px solid #990000;}
      </style>
      
      <script type="text/javascript">
      function addLayer() {
        var cont = document.getElementById('container');
        var d = document.createElement('div');
        d.appendChild(document.createTextNode('someText'));
        cont.appendChild(d);
      }
      </script>
      </head>
      
      <div id="container"></div>
      
      
      <a href="javascript:void(null)" onclick="addLayer();">test</a><br /><br />
      </body>
      </html>

      Comment


      • #4
        crirus:

        1.innerHTML, although non-standard is wery handy to some point, sunner or later u will hit its limitations, so look at DOM.

        beagle: he could have two possible reasons:

        1. hide his css, which is not wery smart, coz css is practicaly not usable if you forinstance hide java script(perhaps for hiding that would be a real reason)
        2. just trying to make faster initial page load, as needed css would be transfered later
        Found a flower or bug and don't know what it is ?
        agrozoo.net galery
        if you don't spot search button at once, there is search form:
        agrozoo.net galery search

        Comment

        Working...
        X