Some of the more complex web sites (Amazon and Yahoo!) make use of Style Elements within the Body Element - see the source snippets below.Gecko (Firefox, Flock, Mozilla, etc…) based browsers automatically move Style Elements found within the Body Element into the Head Element and render the page as expected - see the rendered Document Object Model (DOM) image below.Internet Explorer doesn't move the Style Element into the Head Element, but renders the page as expected.Opera… well I wish I knew what Opera did, but the page renders as expected.
</table> </td> </tr></table><style type="text/css">.lol-hr-center { margin: 5px; border-top-width: 1px; /* and so on... */}</style> <div id="listoflists_data" style="display:none"> Note how the Style element is located between the <table> and <div> tags.
<h4><a id="paweather" class="details" href="r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html"><span class="icon">Weather <b><strong>51°</strong>F</b></span></a><style type="text/css">#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}</style></h4>Note how the Style element is located within the <h4> tag.
<h4><a id="paweather" class="details" href="r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html"><span class="icon">Weather <b><strong>51°</strong>F</b></span></a>
<style type="text/css">#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}</style>
</h4>Note how the Style element is located within the <h4> tag.
Note the highlighted area references the Yahoo! source snippet from above.