31st
JUL

css float formating with javascript versus IE

Posted by dragos | Filed under HTML

If you ever, by any chance try to format some HTML elements with javascript, and that formating would refer to float propertries, please be aware. Let me give you the most simple example I’ve met:

<p id="a1">a</p>
<p id="a2">a</p>
<p id="a3">a</p>
document.getElementById('a1').style.width='100px';  
document.getElementById('a2').style.width='100px';  
document.getElementById('a3').style.width='100px';  
document.getElementById('a1').style.backgroundColor = '#FF0000';    
document.getElementById('a2').style.backgroundColor = '#FF0000';    
document.getElementById('a3').style.backgroundColor = '#FF0000';    
document.getElementById('a1').style.cssFloat= 'left';    
document.getElementById('a2').style.cssFloat= 'left';    
document.getElementById('a3').style.cssFloat= 'left';

All the browsers will interpret it well, EXCEPT IE. On IE, the previous formating of the divs remains. The solution took me about 2 hours, and it looks like this. Do not ask me if changing the floating now would work, ’cause I don’t know. I’m just to afraid even to think at such thing.

<p id="a1" style="float: left">a</p>
<p id="a2" style="float: left">a</p>
<p id="a3" style="float: left">a</p>
document.getElementById('a1').style.width='100px';  
document.getElementById('a2').style.width='100px';  
document.getElementById('a3').style.width='100px';  
document.getElementById('a1').style.backgroundColor = '#FF0000';    
document.getElementById('a2').style.backgroundColor = '#FF0000';    
document.getElementById('a3').style.backgroundColor = '#FF0000';
Share and Enjoy:
  • Facebook
  • Twitter
  • Identi.ca
  • email
  • Add to favorites
  • Digg
  • StumbleUpon

Reader's Comments

  1. xcv |

    for IE
    document.getElementById(‘a1′).style.styleFloat= ‘left’;

    explained eg. on
    http://www.howtocreate.co.uk/tutorials/javascript/domcss

Leave a Reply