Problema al ver con Firefox

[indie81]

Vereis, tengo un menu en una web, con las secciones asi distribuidas:

Iniciado por index.html

<div id="menu">
<a target="_self" href="#" class="botontitular">FUNDACIÓN</a><br><br>
<a target="_self" href="fundacion1.html" class="boton">INICIO</a><BR>
<a target="_self" href="fundacion2.html" class="boton">¿QUÉ ES LA FH?</a><BR>
<a target="_self" href="fundacion3.html" class="boton">SALUDO</a><BR>
<a target="_self" href="fundacion4.html" class="boton">OBJETIVOS</a><BR>
<a target="_self" href="fundacion5.html" class="boton">COLABORACIÓN</a><BR>
</div>

,donde las clases boton y botontitular son asi:

Iniciado por estilo.css

a.boton,a.boton:link,a.boton:focus,a.boton:visited ,a.boton:active{
text-decoration:none;
background-color:#6E8B58;
color:#000000;
font-size:9pt;
border:1px solid #003300;
width:130px;
padding:3px;
}

a.boton:hover{
text-decoration:none;
background-color:#003300;
color:#ffffff;
font-size:9pt;
border:1px solid #6E8B58;
width:130px;
padding:3px;
}

a.botontitular,a.botontitular:link,a.botontitular: focus,a.botontitular:visited,a.botontitular:active ,a.botontitular:hover{
text-decoration:none;
background-color:#990000;
color:#ffffff;
font-size:9pt;
border:1px solid #003300;
width:130px;
padding:3px;
}

Y en Internet Explorer el resultado queda como deseo, que es como se ve en la web:

http://www.musicapolar.com/Haptonomia

Pero en Firefox, los botones se solapan y se tapan. Quiero que se vea bien en Firefox, pero sin que cambie la forma del Explorer, es decir, no basta con pones mas <br> entre cada boton.

¿Sabriais solucionar esto?

Gracias!!!

[DarkJ]

Prueba a sustituir esa serie de enlaces separados por <br> por una lista noordenada de enlaces <ul><li><a href="">. Te permitira mas control, y hay muchas paginas con tutoriales sobre ese tipo de menus.

[ChikiChiki]

No veo esos botones que se solapan... ¿Está bien el link?

Un saludo, ChikiChiki