duda con el borde superior

al parecer segui su curso y blablabla... pero puse los codigos exactos, guarde la imagen del borde en la carpeta objetos y aun asi no me lo muestra, me aparece esto:

[contenido no disponible]

Aparte que al quitar el "width 800px" de contenido el menu volvio a colgarse y no respeta espacip.

Aqui el codigo de la hoja de estilos
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center;background-color: #E6E6FA }
#global {width:800px ; margin: 4px auto }
#cabecera     {background-color: white ; margin:10px 10px 10px 10px   }
#navegacion {background-color: orange ; border: white 1px solid   }
#contenido {background-color: red ; width 800px ; border: white 1px solid}
#pie               {background-color: brown ; border: white 1px solid}
#menu {background-color: brown; width: 150px ; float:left; margin-right: 10px; margin:10px 10px 10px 10px ; border: white 1px solid }
#menu li { list-style:none }
a {color: green; font-size1.3; text-decoration: none}
a:link		{}
a:visited {color:silver}
a:hover {color:blue; text-decoration:cursive}
a:active {color:red; text-decoration:underline}
p {text-align: justify}
#contenido p {padding: 2px 10px 2px 10px; text-indent: 15px}
h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
border: 1px solid black ;
#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 }


Y aqui el de la plantilla
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Web-de-prueba</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">Cabecera</div>

<div id="navegacion">Barra de Navegaci&oacute;n</div>

<div id="contenido">
<div id="menu">Men&uacute;
<ul>

  [*][url="#"]Elemento 1[/url]

  [*][url="#"]Elemento 2[/url]

  [*][url="#"]Elemento 3[/url]

  <ul>

  [/list]

[/list]

</div>

<h1>hola</h1>



Esta ser&aacute; la zona principal de la web</p>

</div>

<div id="pie">Este es el pié de
p&aacute;gina</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>
[contenido no disponible]
hola

en el css debes acomodar las ordenes por orden de aparicion en el html
asi tendras todo en orden

*
body
global
curva-superrior
cabecera
navegacion
etc etc etc

aqui en vez de margin deberias poner pading que es margen interior,
margin es margen exterior por eso te queda ese espacio
#cabecera {background-color: white ; margin:10px 10px 10px 10px }

aqui, etas duplicando el margen
#menu {background-color: brown; width: 150px ; float:left; margin-right: 10px; margin:10px 10px 10px 10px ; border: white 1px solid }

aqui te faltan :
#contenido {background-color: red ; width 800px ; border: white 1px solid; }

a {color: green; font-size1.3; text-decoration: none}

aqui, esa orden... donde debe estar?? dentro de que?????
h2 {font-size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
border: 1px solid black ;

en el html
con una sola vez que cierres el ul es suficiente

<ul>

  • Elemento 1

  • Elemento 2

  • Elemento 3

    <ul>





    lo checas y ns avisas

    saludos