BUENAS A TOD@S ESTOY EMPEZANDO Y TENGO UN PROBLEMA, CUANDO ABRO LA PAGINA CON CHROME LO VEO TODO CORRECTAMENTE PERO SI LO ABRO CON EXPLORER NO VEO LOS GRÁFICOS SOBRE TODO LOS DE BORDES POR QUE PUEDE SER ESTO? GRACIAS DE ANTEMANO
CUANDO ABRO LA PAGINA CON CHROME LO VEO PERFECTO
Hola, seguramente si la miras con firefox tendras el mismo problema, pero se puede arreglar cambiando algunos numeros y letras, para eso debes mostrarnos los codigos de la css y de tu index, saludos.
MI INDEX:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad"><h1>A.M.P.A- I.E.S. Condestable Alvaro de Luna</h2></div>
</div>
<div id="navegacion"><ul>Menu 1 Menu 2
Menu 3Menu 4 Menu 5</div>
<div id="contenido">
<div id="menu"><ul><h1>Titulo de la seccion 1</h1> Enlace 1 Enlace 2 Enlace 3 Enlace 4
</div><h2>Primer parrafo de la pagina.</h2>
La cosa va mejorando,
pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la página.
Eso no queda muy bien, así que vamos a arreglarlo. </p>
Resumiendo, escribimos primero la capa
y luego el elemento de dentro de esa capa al que queremos definir cosas y luego, entre paréntesis,
las propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo,
para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera necesario.</p>
Con esto los textos quedan justificados. Esto significa que se reparten para que empiecen justo
en la parte izquierda y terminen todas las líneas justo en el margen derecho, sin huecos.
A mi me gusta así, pero si lo prefieres, en tus páginas puedes definirlo como
text-align: left o text-align:right o text-align:center, como quieras. En el ejemplo
lo dejamos con Justify.</p>
</div>
<div id="pie">Este es el pie de la pagina</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
MIS ESTILOS:
*{margin: 0px; padding: 0px; border: 0px}
p {text-align: justify}
h1 {font-size: 1.5em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center; background-color: E6E6FA; background-image: url(objetos/fondo.png)}
#cabecera {background-color: white; border-left: black 1px solid ;
border-right: black 1px solid; height:85px }
#navegacion {background-color: gray; border: black 1p solid; height:20px}
#navegacion li {float:left; list-style: none; margin: 0px 20px 0px 20px}
#navegacion ul {margin: 0px 0px 0px 160px}
#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; overfloww: hidden }
#contenido {background-color: orange; width: auto;
border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px; text-indent: 25px}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid; border-top: black 1px solid }
#global {width: 800px; margin: 4px auto}
#menu {background-color: yellow; width: 150px; float: left; text-align: left;
margin: 3px 10px 3px 3px; background-image:
url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom: 5px }
#menu li {list-style: none; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size: 12px;
background-image: url(objetos/menu-parte-superior.gif)}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#logotipo {background-color: white ; width:280px ; float:left }
#publicidad {background-color: white ; width:518px ; float:right; margin-top:25px }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad"><h1>A.M.P.A- I.E.S. Condestable Alvaro de Luna</h2></div>
</div>
<div id="navegacion"><ul>
Menu 3
<div id="contenido">
<div id="menu"><ul><h1>Titulo de la seccion 1</h1>
</div><h2>Primer parrafo de la pagina.</h2>
La cosa va mejorando,
pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la página.
Eso no queda muy bien, así que vamos a arreglarlo. </p>
Resumiendo, escribimos primero la capa
y luego el elemento de dentro de esa capa al que queremos definir cosas y luego, entre paréntesis,
las propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo,
para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera necesario.</p>
Con esto los textos quedan justificados. Esto significa que se reparten para que empiecen justo
en la parte izquierda y terminen todas las líneas justo en el margen derecho, sin huecos.
A mi me gusta así, pero si lo prefieres, en tus páginas puedes definirlo como
text-align: left o text-align:right o text-align:center, como quieras. En el ejemplo
lo dejamos con Justify.</p>
</div>
<div id="pie">Este es el pie de la pagina</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
MIS ESTILOS:
*{margin: 0px; padding: 0px; border: 0px}
p {text-align: justify}
h1 {font-size: 1.5em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center; background-color: E6E6FA; background-image: url(objetos/fondo.png)}
#cabecera {background-color: white; border-left: black 1px solid ;
border-right: black 1px solid; height:85px }
#navegacion {background-color: gray; border: black 1p solid; height:20px}
#navegacion li {float:left; list-style: none; margin: 0px 20px 0px 20px}
#navegacion ul {margin: 0px 0px 0px 160px}
#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; overfloww: hidden }
#contenido {background-color: orange; width: auto;
border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px; text-indent: 25px}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid; border-top: black 1px solid }
#global {width: 800px; margin: 4px auto}
#menu {background-color: yellow; width: 150px; float: left; text-align: left;
margin: 3px 10px 3px 3px; background-image:
url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom: 5px }
#menu li {list-style: none; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size: 12px;
background-image: url(objetos/menu-parte-superior.gif)}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#logotipo {background-color: white ; width:280px ; float:left }
#publicidad {background-color: white ; width:518px ; float:right; margin-top:25px }
Hola yhalero.
Mira lo que hay escrito en Wikipedia en relación a las imágenes de extensión .bmp:
http://es.wikipedia.org/wiki/Windows_bitmap
Elimina una “w” ( la escrita de color rojo) en la siguiente línea de códigos:
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no repeat;
width:800px; height: 12px; overfloww: hidden }
pues con las dos “w”, en Internet Explorer se visualiza doble la curva inferior.
En la siguiente línea de códigos:
<div id="publicidad"><h1>A.M.P.A- I.E.S. Condestable Alvaro de Luna</h2></div>
como has abierto con la etiqueta <h1>, debes cerrar con </h1>
Saludos.
Mira lo que hay escrito en Wikipedia en relación a las imágenes de extensión .bmp:
http://es.wikipedia.org/wiki/Windows_bitmap
Elimina una “w” ( la escrita de color rojo) en la siguiente línea de códigos:
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no repeat;
width:800px; height: 12px; overfloww: hidden }
pues con las dos “w”, en Internet Explorer se visualiza doble la curva inferior.
En la siguiente línea de códigos:
<div id="publicidad"><h1>A.M.P.A- I.E.S. Condestable Alvaro de Luna</h2></div>
como has abierto con la etiqueta <h1>, debes cerrar con </h1>
Saludos.
Primero agradecerte mucho tus correcciones. Estoy diseñando una web para la asociación de padres del colegio de mi hija. Pero ahora tengo otro problema, me pasa lo contrario veo bien la pagina con el HTML-kit y con el el explorer (aunque no soy capaz de ver el fondo que había puesto) en cambio con el chrome y el firefox veo el fondo pero la parte de arriba esta desordenada y no soy capaz de corregirlo. Como puedo mandarte el archivo para que me digas como puedo solucionarlo.
Gracias también por lo de los archivos bmp
Gracias también por lo de los archivos bmp
Hola de nuevo yhalero. Mucho ánimo con tu web.
Vuelve a copiar, y pegar aquí, los contenidos de tu plantilla y tu hoja de estilos. Si nos hacen falta otros datos, te los pediremos.
Saludos.
Vuelve a copiar, y pegar aquí, los contenidos de tu plantilla y tu hoja de estilos. Si nos hacen falta otros datos, te los pediremos.
Saludos.
AHORA VEO BIEN LA PAGINA CON EL EXPLORER Y EN PREWIEV AUNQUE NO ME SALE LA IMAGEN DE FONDO PERO CON CHROME Y FIREFOX SALE LA IMAGEN DE FONDO PERO SE DESCENTRAN LOS MENUS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
[contenido no disponible]
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><div>Asociación de padres y madres de alumnos</div>[contenido no disponible]</a></div>
<div id="publicidad"><h1>A.M.P.A.- I.E.S. Condestable Alvaro de Luna</h1>
Carretera de Ugena s/n- Apdo 135</p>
45200 Illescas (Toledo)</p>
[correo eliminado]
</p>[contenido no disponible]</div></div>
<div id="navegacion"><ul>Inicio [correo eliminado]
Condestable
Papás 2.0
Enlaces Noticias Foro
</div>
<div id="contenido">
<div id="menu"><ul><h1>Contenido</h1> PRESENTACIÓN ¿Que es el AMPA?
¿Para que sirve? Nuestros objetivos
¿Que necesita el AMPA ¿Como me asocio?
¿Como contactar?
</div>
</p>
</p>
<h2>PRESENTACIÓN Y BIENVENIDA</h2>
En primer lugar queremos desde aquí, daros la bienvenida a todas las madres y padres
del I.E.S. Condestable Alvaro de Luna.</p>
Nos es grato presentaros esta nueva pagina web, que no tiene otro proposito
que la divulgacion de nuestra Asociación entre los responsables de la educacion de nuestros hijos. Tambien nos gustaria que
sirva como elemento de comunicación entre nosotros, los padres y tutores legales. Usarla y mandarnos cualquier queja,
reclamación, protesta, crítica, etc. y por que no tambien vustras propuestas, ideas y sugerencias. Intentaremos contestaros
y solucionar el problema lo mas efectivamente posible, usando los mecanismos que tenemos a nuestro alcance.</p>
Trabajamos
para la creación de un Foro, en el que podamos colgar nuestros comentarios y así compartirlos con todos padres y madres que
visiten nuestra pagina.
Esperamos que os sea muy util y estamos a vuestra disposiciónpara cualquier duda. Animaos, los
que aun no sois socios, solo son cinco euritos al año.</p>
<h2>¿ Que es el A.M.P.A. ?</h2>
Es la agrupación de padres y madres o tutores legales de los alumnos matriculados en un centro educativo.</p>
<h2>¿ Para que sirve el A.M.P.A. ?</h2>
Para asistir a los padres en todo lo que afecta a la educación de los hijos, así mismo promueve actividades de
tipo culturales, ludicas y deportivas para que nuestro hijos complementen su enseñanza en el centro educativo.</p>
<h2>Nuestros objetivos</h2>
Colaborar en la construcción de una comunidad educativa plural, comprometida con la educacion, en la que trabajemos
codo a codo todas las personas implicadas y desde la que podamos reivindicar a la administración todas las carencias
observadas y colaborar con su mejora.</p>
<h2>¿ Que necesita el A.M.P.A. ?</h2>
Madres y Padres con ganas de participar, aportando ideas, nuestro saber, nuestro tiempo, nuestro entusiasmo.
No olvideis que a través del A.M.P.A. tenemos voz y voto en los órganos de Consejo Escolar, así como en los órganos
Municipales, para entre todos facilitarnos la tarea de educar a nuestros hijos. Si no dispones de tiempo la aportación
anual para la asociación es solode cinco euros anuales, nos gustaria ser mas.</p>
<h2>¿ Como me asocio ?</h2>
Solo tienes que ir al BBVA Illescas, e ingresar la cuota anual por familia, 5 €</p>
<h2>¿ Como contartar con el A.M.P.A. ?</h2>
Estamos todos los Jueves de 9:30 a 11:00 en la sala que nos cede el Instituto, pregunta en conserjeria.
Tenemos un buzon en el centro en donde puedes dejar tus quejas, dudas, sugerencias o lo que quieras.
Y a traves de nuestro e-mail[correo eliminado]
[contenido no disponible]</p>
<h2>¡ANIMAROS A PARTICIPAR!</h2><h2>¡JUNTOS CONSEGUIREMOS MAS OBJETIVOS PARA NUESTROS HIJOS!</h2>
[contenido no disponible]
</div>
<div id="pie">Web creada por Jose Carlos Ramajo Rodriguez</div>
<div id="curva-inferior"></div>
</div>
<h1>¡ FELIZ NAVIDAD A TOD@S !</h1>
[contenido no disponible]
</body>
</html>
ESTILOS CSS
*{margin: 0px; padding: 0px; border: 0px}
p {text-align: justify}
h1 {font-size: 1.5em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center; background-color: #F5DEB3; background-image: url(objetos/fondo.png)}
#cabecera {background-color: white; border-left: black 1px solid ;
border-right: black 1px solid; height: 85px }
#publicidad {margin-bottom: 10px}
#publicidad p {margin-left: 150px; color: blue; }
#navegacion {background-color: #FFF5EE; border: black 1p solid; height:25px}
#navegacion li {float:left; list-style: none; margin: 0px 20px 0px 5px}
#navegacion ul {margin: 0px 0px 0px 100px}
#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 }
#contenido {background-color: orange; width: auto;
border-left: black 1px solid ; border-right: black 1px solid;}
#contenido p {padding: 10px 10px 5px 10px; text-indent: 25px;}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid; border-top: black 1px solid; font.size: 0.6em;
color: red; text align: right }
#global {width: 800px; margin: 4px auto}
#menu {background-color: yellow; width: 150px; float: left; text-align: left;
margin: 3px 10px 3px 3px; background-image:
url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom: 5px }
#menu li {list-style: none; margin: 6px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size: 12px;
background-image: url(objetos/menu-parte-superior.gif)}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#logotipo {background-color: white ; width:280px ; float:left }
#publicidad {background-color: white ; width:518px ; float:right; margin-top:25px }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
[contenido no disponible]
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><div>Asociación de padres y madres de alumnos</div>[contenido no disponible]</a></div>
<div id="publicidad"><h1>A.M.P.A.- I.E.S. Condestable Alvaro de Luna</h1>
Carretera de Ugena s/n- Apdo 135</p>
45200 Illescas (Toledo)</p>
[correo eliminado]
</p>[contenido no disponible]</div></div>
<div id="navegacion"><ul>
</div>
<div id="contenido">
<div id="menu"><ul><h1>Contenido</h1>
</div>
</p>
</p>
<h2>PRESENTACIÓN Y BIENVENIDA</h2>
En primer lugar queremos desde aquí, daros la bienvenida a todas las madres y padres
del I.E.S. Condestable Alvaro de Luna.</p>
Nos es grato presentaros esta nueva pagina web, que no tiene otro proposito
que la divulgacion de nuestra Asociación entre los responsables de la educacion de nuestros hijos. Tambien nos gustaria que
sirva como elemento de comunicación entre nosotros, los padres y tutores legales. Usarla y mandarnos cualquier queja,
reclamación, protesta, crítica, etc. y por que no tambien vustras propuestas, ideas y sugerencias. Intentaremos contestaros
y solucionar el problema lo mas efectivamente posible, usando los mecanismos que tenemos a nuestro alcance.</p>
Trabajamos
para la creación de un Foro, en el que podamos colgar nuestros comentarios y así compartirlos con todos padres y madres que
visiten nuestra pagina.
Esperamos que os sea muy util y estamos a vuestra disposiciónpara cualquier duda. Animaos, los
que aun no sois socios, solo son cinco euritos al año.</p>
<h2>¿ Que es el A.M.P.A. ?</h2>
Es la agrupación de padres y madres o tutores legales de los alumnos matriculados en un centro educativo.</p>
<h2>¿ Para que sirve el A.M.P.A. ?</h2>
Para asistir a los padres en todo lo que afecta a la educación de los hijos, así mismo promueve actividades de
tipo culturales, ludicas y deportivas para que nuestro hijos complementen su enseñanza en el centro educativo.</p>
<h2>Nuestros objetivos</h2>
Colaborar en la construcción de una comunidad educativa plural, comprometida con la educacion, en la que trabajemos
codo a codo todas las personas implicadas y desde la que podamos reivindicar a la administración todas las carencias
observadas y colaborar con su mejora.</p>
<h2>¿ Que necesita el A.M.P.A. ?</h2>
Madres y Padres con ganas de participar, aportando ideas, nuestro saber, nuestro tiempo, nuestro entusiasmo.
No olvideis que a través del A.M.P.A. tenemos voz y voto en los órganos de Consejo Escolar, así como en los órganos
Municipales, para entre todos facilitarnos la tarea de educar a nuestros hijos. Si no dispones de tiempo la aportación
anual para la asociación es solode cinco euros anuales, nos gustaria ser mas.</p>
<h2>¿ Como me asocio ?</h2>
Solo tienes que ir al BBVA Illescas, e ingresar la cuota anual por familia, 5 €</p>
<h2>¿ Como contartar con el A.M.P.A. ?</h2>
Estamos todos los Jueves de 9:30 a 11:00 en la sala que nos cede el Instituto, pregunta en conserjeria.
Tenemos un buzon en el centro en donde puedes dejar tus quejas, dudas, sugerencias o lo que quieras.
Y a traves de nuestro e-mail[correo eliminado]
[contenido no disponible]</p>
<h2>¡ANIMAROS A PARTICIPAR!</h2><h2>¡JUNTOS CONSEGUIREMOS MAS OBJETIVOS PARA NUESTROS HIJOS!</h2>
[contenido no disponible]
</div>
<div id="pie">Web creada por Jose Carlos Ramajo Rodriguez</div>
<div id="curva-inferior"></div>
</div>
<h1>¡ FELIZ NAVIDAD A TOD@S !</h1>
[contenido no disponible]
</body>
</html>
ESTILOS CSS
*{margin: 0px; padding: 0px; border: 0px}
p {text-align: justify}
h1 {font-size: 1.5em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center; background-color: #F5DEB3; background-image: url(objetos/fondo.png)}
#cabecera {background-color: white; border-left: black 1px solid ;
border-right: black 1px solid; height: 85px }
#publicidad {margin-bottom: 10px}
#publicidad p {margin-left: 150px; color: blue; }
#navegacion {background-color: #FFF5EE; border: black 1p solid; height:25px}
#navegacion li {float:left; list-style: none; margin: 0px 20px 0px 5px}
#navegacion ul {margin: 0px 0px 0px 100px}
#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 }
#contenido {background-color: orange; width: auto;
border-left: black 1px solid ; border-right: black 1px solid;}
#contenido p {padding: 10px 10px 5px 10px; text-indent: 25px;}
#pie {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid; border-top: black 1px solid; font.size: 0.6em;
color: red; text align: right }
#global {width: 800px; margin: 4px auto}
#menu {background-color: yellow; width: 150px; float: left; text-align: left;
margin: 3px 10px 3px 3px; background-image:
url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom: 5px }
#menu li {list-style: none; margin: 6px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size: 12px;
background-image: url(objetos/menu-parte-superior.gif)}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#logotipo {background-color: white ; width:280px ; float:left }
#publicidad {background-color: white ; width:518px ; float:right; margin-top:25px }
En la siguiente línea de códigos:
#cabecera {background-color: white; border-left: black 1px solid ;
border-right: black 1px solid; height:85px }
tienes que aumentar el valor height, mínimo 150px
Saludos.
#cabecera {background-color: white; border-left: black 1px solid ;
border-right: black 1px solid; height:85px }
tienes que aumentar el valor height, mínimo 150px
Saludos.