abrakatabra Posted December 22, 2009 Share Posted December 22, 2009 Hello!Here are two ways to create a div element. The first way is statical and the second one is dynamical through JavaScript.The first: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .gen_items1{ position: absolute; top: 0px; left: 0px; width: 8px; height: 8px; background: white; border: solid 1px blue; } </style> </head> <body> <div class="gen_items1"> </div> </body></html> The second: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .gen_items1{ position: absolute; top: 0px; left: 0px; width: 8px; height: 8px; background: white; border: solid 1px blue; } </style> </head> <body> <script type="text/javascript"> var newchild=document.createElement('div'); newchild.className = "gen_items1"; document.getElementsByTagName('body')[0].appendChild(newchild); </script> </body></html> both of them have the same css style named gen_items1.Through the first way IE shows a square, but in case of the second way IE displays a rectange. Why is there a difference? Can you please help me to find out an answer? Link to comment Share on other sites More sharing options...
Ingolme Posted December 22, 2009 Share Posted December 22, 2009 Hmm... That sounds strange to me. Try giving the <div> element some spaces as innerHTML. newchild.innerHTML = " "; These lines are redundant since that's already being given with the className. newchild.style.width="8px"; newchild.style.height="8px"; By the way, that <!DOCTYPE> declaration you're using is going to trigger Quirks Mode in all browsers, which means they'll do things very differently than they're supposed to. Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 Thank you for the answer. newchild.innerHTML = " "; I have tried additional spaces and have tried to deleted <!DOCTYPE> but no result: my div element is displayed differently by two mention ways.These lines are redundant since that's already being given with the className. newchild.style.width="8px"; newchild.style.height="8px"; Yes. you are right. They are unnecessary lines which can be ignored. I have corrected my code at the first post.By the way, that <!DOCTYPE> declaration you're using is going to trigger Quirks Mode in all browsers, which means they'll do things very differently than they're supposed to.So, what shoud I use insted of <!DOCTYPE>? Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 By the way when I mention IE I mean IE6 & IE7 Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 When I use width & height more or equal to 20px then my examples works as I expect. I.e. in both ways div's are displayed identically width: 20px;height: 20px; Link to comment Share on other sites More sharing options...
Ingolme Posted December 22, 2009 Share Posted December 22, 2009 That's because 8px is smaller than the size of the font in the box and in order to fix that you also have to set the line-height property.Removing the DOCTYPE will not solve the Quirks Mode problem, a document without a DOCTYPE declaration also renders in quirks mode.The only way to solve it is to use a Standards Compliant DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 That's because 8px is smaller than the size of the font in the box and in order to fix that you also have to set the line-height property.Removing the DOCTYPE will not solve the Quirks Mode problem, a document without a DOCTYPE declaration also renders in quirks mode.The only way to solve it is to use a Standards Compliant DOCTYPE:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> unfortunately, line-height does not solve my problem :-(line-height: 1px; here is whole code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .gen_items1{ position: absolute; top: 0px; left: 0px; width: 8px; height: 8px; background: white; border: solid 1px blue; line-height: 1px; } </style> </head> <body> <!-- <div class="gen_items1"></div> --> <script type="text/javascript"> var newchild=document.createElement('div'); newchild.className = "gen_items1"; newchild.innerHTML = " "; // also tried without this line document.getElementsByTagName('body')[0].appendChild(newchild); </script> </body></html> Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 Hurrah! Thank you a lot to push me to right direction!Below code helps me. font-size: 1px; Just curious, why I should set font-size to 1px in case javascript but I should not do in case static code? Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 whole code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .gen_items1{ position: absolute; top: 0px; left: 0px; width: 8px; height: 8px; background: white; border: solid 1px blue; line-height: 1px; font-size: 1px; } </style> </head> <body> <!-- <div class="gen_items1"></div> --> <script type="text/javascript"> var newchild=document.createElement('div'); newchild.className = "gen_items1"; document.getElementsByTagName('body')[0].appendChild(newchild); </script> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted December 22, 2009 Share Posted December 22, 2009 Hmm, that's kind of strange, it might be a weird bug in Internet Explorer. Certainly somebody could put a few hours of testing and investigation behind it, but I'd say it's more work than it's worth.Usually, to get a box to behave perfectly in Internet Explorer you also have to have a non-breaking character in the element, such as the non-breaking space.<div> </div> Link to comment Share on other sites More sharing options...
abrakatabra Posted December 22, 2009 Author Share Posted December 22, 2009 thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.