reformular página

Fiz um bloco que some ou aparece a parte do conteúdo, sendo que não tenho muito conhecimento em css ou javascript gostaria que vocês verificassem se o código pode ser melhorado, outra coisa que gostaria é que me ajudassem a fazer o código funcionar para a maioria dos navegadores, testei no firefox e no IE7, mas não está legal, em cada um fica de uma maneira, obrigado.

>

<style>

#bloco{

width:150px;

border:inset medium;

}

#barra{

background:#0033FF repeat-x;

background-image:url(imagem/gradient_thead.gif);

width:135px; height:20px;

padding:5 10 5 5;

}

#conteudo{

background:#009900;

width:135px; height:150px;

padding:5 10 5 5;

display:block;

}

.barra_texto{

/font: Arial, Helvetica, sans-serif;/

font:11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif

font-size:16px; color:#FFF;

float:left;

}

.imagem{

float:right;

padding-top:3px;

}

</style>

<script language="JavaScript" type="text/javascript">

 function action(act)

{

if(document.getElementById(act).style.display == 'none')

{

document.getElementById(act).style.display = 'block'

}

else

{

document.getElementById(act).style.display = 'none'

}

}

</script>

<div id="bloco">

<div id="barra">

 <b class="barra_texto">

 <strong>»Barra</strong>

 </b>

 <b class="imagem">

 <a href='java script:action("conteudo")'>

 <img src="imagem/fase.gif" border=0 />

 </a>

 </b>

</div>

 

<div id="conteudo">

 <strong>

 Conteúdo Conteúdo<br>Conteúdo Conteúdo

 <br>Conteúdo Conteúdo<br>Conteúdo Conteúdo

 </strong>

</div>

</div>