streaming porno salope
New Member
I have a situation where sometimes elements are loaded at page load, and sometimes they are generated by JavaScript at a later date, nothing fancy there. However the dynamically genrated elements are spaced apart noticeably different in Chrome, FireFox, and Safari.Below is an HTML page where one chunk of elements is in the DOM at page load and an exact copy of those elements is added by JavaScript after page load. For some reason the JS-added elements (those in \[code\]#added-late\[/code\]) are styled different from those in \[code\]#exists-at-page-load\[/code\] despite all styling and layout being the same.Question: Why do the statically generated elements, those in \[code\]#exists-at-page-load\[/code\], have extra space around them?\[code\]<!DOCTYPE html><html> <style> .dark-section-header { background-color: #222; margin-bottom: 5px; } .dark-section-header div { display: inline-block; height: 30px; width: 20px; margin: 0; margin-left: 10px; } .dark-section-header .track-menu { outline: 1px dashed #f00; } .dark-section-header .play-button { outline: 1px dashed #0f0; } .dark-section-header .star-button { outline: 1px dashed #77f; } </style> </head> <body> <div id="exists-at-page-load"> <div class="dark-section-header"> <div class="play-button"></div> <div class="track-menu"></div> <div class="star-button"></div> </div> </div> <div id="added-late"></div> <script> setTimeout(function(){ document.getElementById( 'added-late' ).innerHTML = '<div class="dark-section-header">' + '<div class="play-button"></div>' + '<div class="track-menu"></div>' + '<div class="star-button"></div>' + '</div>'; }, 0 ); </script> </body></html>\[/code\]