No me aparece curca-superior a mi tampoco!

Pues estoy empezando a aprender html y css y me he encontrado con ésta traba que no e como resolver.

El tema es que la imagen no me sale ni por activa ni por pasiva os paso los codigos y me decis si podeis... gracias de antemano amigos :).

CODIGO HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Probando divs </title>
<link href="estilos.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="dimensiones">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div> 
<div id="navigation">
<ul>
<li><a href="#">BOTON1</li>
<li><a href="#">BOTON2</a></li>
<li><a href="#">BOTON3</a></li>
<li><a href="#">BOTON4</a></li>
<li><a href="#">BOTON5</a></li>
<li><a href="#">BOTON6</a></li>
<li><a href="#">BOTON7</a></li>
<li><a href="#">BOTON8</a></li>
</ul>
</div> 
<div id="contenido">
<div id="articles">Articulos</div>
<div id="noticias"><h1>Título de la noticia</h1>

<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>

<p>Y este es el tercer párrafo. En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.

Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p></div>
<div class="modulo">módulo
<ul >
<li><a href="#">BOTON 1</a></li>
<li><a href="#">BOTON 2</a></li>
<li><a href="#">BOTON 3</a></li>
<li><a href="#">BOTON 4</a></li>
<li><a href="#">BOTON 5</a></li>
<li><a href="#">BOTON 6</a></li>
</ul>
</div>


<p>Esta será la zona principal de la web</p>
</div> 
<div id="pie">Este es el pié de página</div> 
</div>
</body>
</html>


CODIGO CSS

* {margin:0px; padding:0px; border:0px; font-family:verdana; } 
#dimensiones {width:1024px; margin:4px auto;} 
body {text-align:center; font-size:14px;} 
h1 { font-size:20px; font-style:bold; margin:10px 40px 10px 40px; text-align:left; }

#cabecera {background-color: pink; height:180px;}


#navigation { background-color:gray; height:40px; width:1024px; font-size:14px; font-style:bold; font-family:verdana; padding-top:20px; }
#navigation ul li { margin:30px 30px 10px 30px; }
#navigation ul li { display:inline; width:1024; }

#curva-superior { background-image:url(/objetos/curva-superior.gif)
background-repeat:no-repeat; width:800px; height:12px; overflow:hidden; } 


#contenido {background-color:orange; height:800px;}

#pie {background-color:brown;}

#articles {background-color:red; width:1024px; height:180px; float:top;} 

.modulo {background-color:yellow; width:250px; height:300px; float:right;} 
.modulo li { list-style:none; text-align:center; }

#noticias {background-color:green; width:774px; height:300px; float:left;} 
#noticias p { margin:10px 40px 10px 40px; text-indent:50px; }

a {
	color:#0CF;
	text-decoration:none;
	display:inline;
}
a:link {}
a:visited {}
a:hover { color:red; text-decoration:underline; background-color: silver; }
a:active {}
p {text-align:justify; font-size:14px; font-family:verdana; }

Ya se que hay cosas que no pintan nada como por ejemplo poner el font-family en todos lados pero es por unos cambios que hice xDDD