Problema con imagen background...

[ralfillo]

Hola a todos,

Escribo porque tengo un problemilla, estoy remodelando una web que hice y estoy haciendo un box y quiero poner una imagen de fondo (tal como estaba antes) y no se porque no se me visualiza. os pongo de referencia las dos webs y el codigo fuente de la nueva.


Página antigua (los boxes con el background los quiero conservar):
monvigar.com/recursos.html

Página nueva (no puedo poner la imagen de background):
monvigar.freehostia.com/recursos.html


Codigo fuente html:

<div id="caja">Soldadores homologados (5)<br />
Personal Taller (25)<br />
Personal administraci&oacute;n (5)<br />
Ingenieros industriales (1)<br />
Ingenieros t&eacute;cnicos (1)<br />
Delineantes (2)<br />
<br />
</div>


en el codigo css no se que poner porqué he probado varias cosas y además del problema de la imagen background ahora no se porqué si hago la etiqueta "caja" con un width menor a 750 se me estrecha toda la página.


Soy bastante novato así que puede ser que sea alguna tonteria,

Saludos a todos, espero vuestras respuestas!

[ralfillo]

por fin, conseguido, no acabo de saber a ciencia cierta lo que era pero pongo los códigos por si a alguien le sirve

html:

<div id="caja"><br /><br />Soldadores homologados (5)<br /><br />
Personal Taller (25)<br /><br />
Personal administraci&oacute;n (5)<br /><br />
Ingenieros industriales (1)<br /><br />
Ingenieros t&eacute;cnicos (1)<br /><br />
Delineantes (2)<br />
<br />
</div>

css:

#caja {

padding-top:5px;
padding-bottom:5px;
padding-left:15px;
padding-right:15px;
text-decoration: none;
border-right: 1px solid #fff;
width: 300px;
height: 300px;
background-image: url(../img/box_recursos2.jpg);
background-repeat: no-repeat;
background-position: left top;
line-height: 15px;
}


Por cierto alguien sabe porque la imagen del header se ve en mozilla y no en internet explorer??? pongo el código a continuación (monvigar.freehostia.com) en dreamweaver nose porque no se ve la imagen en vista diseño:

html:

<div id="page_header">


<h1 align="center">&nbsp;</h1>
<div id="flags">
<ul>
<li><a href="xxx"><img src="img/flag_cat.gif" alt="Español"/></a></li>
<li><a href="xxx"><img src="img/flag_spa.gif" alt="English"/></a></li>
</ul>
</div>
</div>


css:

#page_header {
height: 120px;
clear: both;
background-color: #FFFFFF;
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: center center;
}

Saludos y gracias!!

[jepsersk8]

hola! mira, puedes ahorrarte unos bytes limpiando tu codigo!
podria quedar asi:

Código:

#caja {
padding:5px 15px;
border-right: 1px solid #fff;
width: 300px;
background: url(../img/box_recursos2.jpg) no-repeat left top;
}
#caja ul{
list-style:none;
margin:10px 0 10px;
}
#caja ul li{
margin-bottom:8px;
}

y tu html seria mas limpio de esta manera:

<div id="caja">
<ul>
<li>Soldadores homologados (5)</li>
<li>Personal Taller (25)<br /></li>
<li>Personal administraci&oacute;n (5)</li>
<li>Ingenieros industriales (1)</li>
<li>Ingenieros t&eacute;cnicos (1)</li>
<li>Delineantes (2)</li>
</ul>
</div>

ahora con lo del header:
1. Deberias quitar el h1 que no tiene nada (puntos menos en accesibilidad)
2. agregale un clear:both; despues de tu div flags
3. darle un height especifico porque lo que tienes no va a "crecer"

Exitos!

[ralfillo]

Hola jepserk8, gracias por tu respuesta, pero sigo con el problema del header he hecho lo que me has dicho, pero no hay manera, ahora no se ve ni en uno ni en otro (debe ser alguna cosa que se me ha pasado, pero no se el que), la imagen ahora me hace 750x120, lo mismo que el box del div.

La web es esta:
monvigar.com

El código es este:

HTML:

<div id="page_header">
<div id="flags">
<ul>
<li><a href="index_cat.html"><img src="img/flag_cat.gif" alt="Español"/></a></li>
<li><a href="index.html"><img src="img/flag_spa.gif" alt="English"/></a></li>
</ul>
</div>
</div>

CSS:

#page_header {
height: 120px;
width: 750px;
background-image: url(img/header.jpg);
background-repeat: no-repeat;
background-position: center center;

}

#flags {
width:90px;
height:0px;
float: right;
top: 80px;
right: 690px;
position:relative;
clear:both;
}
#ul{
float:left;
}
#ulli {
float:left;
list-style-type: none;
}
#ul li a {
text-decoration:underline;
}

#flags ul li {
display: inline;
}

Espero vuestras respuestas, que esto casi está!!!
Saludos!!

[ralfillo]

Hola a todos!

Nadie sabe a que puede ser debido que no se vea la imagen background del header?
A alguien se le ocurre alguna solución alternativa??

Saludos y gracias!!!