internet explorer javascript style.height not working

Question

I am trying to create a cookie policy alert for a website, just something simple like a bar at the top of the screen. The idea is that the user has to click close before the bar will disappear. The concept works fine in google chrome however in internet explorer 9, it does not alter its height when clicked.

Here is my code (I know it is basic but unfortunately it has to be due to the platform the establishment uses-

<script language=javascript type='text/javascript'> 
function hideDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.height= '0px'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideShow.height= '0px'; 
} 
else { // IE 4 
document.all.hideShow.style.height= '0px'; 
} 
} 
} 

function showDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideShow.visibility = 'visible'; 
} 
else { // IE 4 
document.all.hideShow.style.visibility = 'visible'; 
} 
} 
} 
</script> 

<style>
#hideShow{
color:white;
font-family:Gill Sans MT;
text-align:center;
font-height:20px;
</style>

<div id="hideShow" ..etc> 
My content 
<a href="javascript:hideDiv()">Close</a> 
</div> 

Also, if anyone would be so kind, could you please explain how I could set it up so that the div 'hideShow' shows up until it is clicked, and then never again on that machine?

Please let me know if you need any more details. Thanks in advance Rob

Answer 1

The issue was that the height had to be defined within the hideShow css. As well as the font size. Then the javascript had to set height and fontSize to 0px.