La página se mueve al poner el ratón en un enlace en negrita

Pues eso, en la barra de navegación he puesto que al poner el ratón encima se ponga en negrita, pero resulta que ahora cuando se pone en negrita se mueve toda la página, muy poco, la diferencia de volumen de la letra normal a negrita, pero es muy desagradable el efecto.
¿Cómo lo soluciono?
Aprendiz de aprendiz de WebMaster...
Perdón: :oops:

* {margin:0px ; padding:0px ; border:0px}
* {font-family: times roman}
h1 {font-size: 1.2em; color:#363636 ; font-weight: comic-sans ; text-decoration: underline ; text-align: center}
h2 {font-size: 1.1em; color:#363636 ; font-weight: bradley ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: white ; border-left: #9C9C9C 1px solid ; border-right: #9C9C9C 1px solid ; height: 116px ; overflow: hidden}
p {text-align: center}
#navegacion {font-size: 0.9em ; background-color: #C1FFC1 ; border:#9C9C9C 1px solid ; height:25px}
#navegacion li {float:left ; list-style: none ; margin: 0px 20px 0px 20px}
#navegacion ul {margin-left: 25px}
#navegacion a {color: #363636 ; text-decoration: none ; display: block}
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color:#8B0000 ; font-weight:bold ; background-color:#C1FFC1}
#navegacion a:active {}
#contenido {background-color: #E8E8E8 ; background-image: url(objetos/fondo1.jpg) ; background-repeat: no-repeat ; background-position: center center ; border-left:#9C9C9C 1px solid; border-right:#9C9C9C 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#pie {background-color: white ; border-left: #9C9C9C 1px solid ; border-top: #9C9C9C 1px solid ; border-right: #9C9C9C 1px solid ; height: 5px}
#pie li {list-style: none ; font-size: 0.6em }
#pieuno { float: left ; width: 88px }
#piedos {float:left ; width: 89px}
#pietres {float:left ; width: 88px}
#piecuatro { float: left ; width: 268px }
#piecinco { float: left ; width: 265px ; font-size: 0.8em}
#menu {width: 150px ; float:right ; text-align:center ; margin: 10px 10px 40px 10px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 2px 4px 2px }
a {color: #1C1C1C ; font-size:1.2em ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:#E8E8E8 ; background-color: #8B0000 }
a:active {}
p {text-align: justify}
#menu h1 {text-decoration: none ; font-size: 1.1em ; background-image: url(objetos/menu-parte-superior.gif)}
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat:no repeat ; width:800px ; height: 12px ; overflow: hidden}
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ; background-repeat:no repeat ; width:800px ; height: 12px ; overflow: hidden}
#logotipo {width: 290px ; float: left}
#publicidad {background-color: white ; width: 505px ; float: right ; }
#pie a {color: #696969 ; text-decoration: none ; display: block}
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:#1C1C1C ; text-decoration: none ; font-weight:bold ; background-color: white}
#pie a:active {}

Tengo varios errores que no sé solucionar:
* Cuando coloco el puntero del ratón sobre los enlaces de la barra de navegación, los de la derecha se desplazan, no se quedan quietos.
* Cuando coloco el puntero del ratón sobre la curva inferior o superior del menú derecho, se me marcan como enlace junto con el último link de la barra de navegación.

No sé cómo solucionarlo, agradecería vuestra ayuda.
Aprendiz de aprendiz de WebMaster...
Me faltó el código html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">


</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">
[contenido no disponible]</div>
</div>
<div id="navegacion">
<ul>
  • Inicio
  • Bienvenida
  • Quiénes somos
  • Terapia
  • Formación
  • Otros servicios

    </div>
    <div id="contenido">
    <div id="menu">

    <h1>Links</h1>
    <ul>
  • Foro
  • Galería de fotos
  • Localización y Contacto
  • Enlaces
    </div>


    <h1>Esta será la zona principal de la web</h1></p>


    No entiendo muy bien cómo van luego a ponerse los diferentes enlaces. Imagino que se pondrán creando tantas plantillas como enlaces contenga la página.</p>


    Para mí, en este momento, es todo un misterio.</p>


    Aún me surge una pregunta más: ¿cómo hago para que el texto no se meta debajo del menú? Queda horroroso.</p>


    Aunque creo que he encontrado la solución poniendo un margen para abajo enorme, de unos 400px creo que irá bien...</p>


    <h2>Voy a comprobarlo...</h2></p>


    Incluso podría ponerle un margen de alrededor de 600px de manera que la web tuviese un largo fijo...</p>


    No sé, esto tendré que meditarlo...</p>


    Me falta averiguar cómo cambiar los tipos de letra...</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Contacto
    </div>
    <div id="piedos">
    <ul>
  • Mapa Web
    </div>
    <div id="pietres">
    <ul>
  • Foro
    </div>
    <div id="piecuatro">
    <ul>
  • Inicio de página
    </div>
    <div id="piecinco">By Karen</div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>
  • Aprendiz de aprendiz de WebMaster...
    Yo creo que es simplemente porque las letras en bold son mas grandes que las originales, podrias lograr el mismo efecto poniendo la misma fuente y hacer que cambien de gris a negro o bien probar achicando las letras de los links un poco. o reemplazando los links de letras a imagenes de lo que quieres que se vea, saludos.
    Hola,
    tienes dos opciones...

    elimina de #navegacion a:hover ---> font-weight:bold;
    o añade a #navegacion a ---> font-weight:bold;
    y se solucionará.

    manmanu