I frequently use 's on my site pages to hold additional 'instructional' information for a particular page. A user can click a button such as "Show Instructions" and the is then shown on the page.
When a page is loaded, I have visibility set to 'hidden'. So then a user will click on a 'Show Instructions' button to show the .
Hidden, the position is 'absolute'. When I show the , the position is set to 'relative', so that it doesn't overlay the content on the page. So the content 'moves' down to make room for it so to speak.
But here's the problem - Internet Explorer behaves differently from Firefox and Chrome. The latter will show and hide the as it should. They accept the position change from absolute to relative. But IE will not show the once its hidden.
Why does IE behave this way? Well, it took me a really long time (few days) to figure this out - I couldn't understand why this would work in the other two browsers - is it common knowledge??
The answer, I have found to be is that in IE you can't change a position from 'relative' to 'absolute' and vice versa when you show/hide it. As long as the position is kept to 'relative' and 'relative' or 'absolute' and 'absolute', it works, but that's not what I want.
The only suggestion I have been given is to use jQuery. I looked into it. I like that its compatible with basically all the browsers.
But aside from using jQuery, is there another solution??