I have an application, which is ajax based, and it's pretty much just my version of http://google.com/ig/, just with a hell of a lot more cool stuff 😛
But anyway, I read each content blocks individually, which has led me to use some... unorthodox methods of including some things. Prime example of which, is CSS, which is usually contained within the head of the page, rather than in the middle of the page.
What I'd like to know is, I can add a <style> block in the middle of a page, AFTER some content has been echoed, but when the style block is the first thing in the element, it's disregarded straight away by IE, and only putting it AFTER some content displays the styles as I'd like them.
Example:
<style type="text/css">
.link { color: green; }
</style>
<div class="link">Hello</div>
This results in the link having no style (it's black, just like in the rest of the page)
<div style="display:none;">Example non-seeable content</div>
<style type="text/css">
.link { color: green; }
</style>
<div class="link">Hello</div>
All of a sudden, the styling works as expected (even if it is incorrect in every way, shape and form 😛)
Any idea why this happens? Bear in mind this is being dynamically added to the page by javascript.
