Foros del Web - Ver Mensaje Individual - Problemas con <section> background, display y border

quico5 · #1 (**permalink**) 28/04/2012, 11:54

...display ampoco funciona...

Por alguna rara razón que desconozco tengo problemas para aplicar css a lo siguiente:

Cita:

el background no se aplica en <dl> ni <dt>

y si le pongo un borde a los enlaces, el borde se aplica a la izquierda del enlace

Cita:

<!DOCTYPE html>
<html lang="es">
<head>
<title>ANHIDA</title>
<meta name="description" content="Asociación de Niños con Hiperactividad y7o Déficit de Atención" />
<meta charset="uft-8" />
<meta name="viewport" content="width=100px, user-scalable=no" />
<meta http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)">
<meta http-equiv="Page-exit" CONTENT="RevealTrans(Duration=4,Transition=0)">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/hidden_bar_android.js"></script>
<script type="text/javascript" src="js/transition_page.js"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>

<header>
<nav>
<dl>
<dt><a>Menu</a></dt>
<dt><span>Menu</span></dt>
<dt><a>Contactar</a></dt>
</dl>
</nav>
</header>

<section>
<nav>
<dl>
<dt><a href="#">Inicio</a></dt>
<dt><a href="#">Tdah</a></dt>
<dt><a href="#">Anhida</a></dt>
<dt><a href="#">Enlaces</a></dt>
<dt><a href="#">Foros</a></dt>
</dl>
</nav>
</section>

<footer>
<nav>
<dl>
<dt>Menu</dt>
</dl>
</nav>
</footer>

</body>
</html>

Cita:

body{
background:url(../imagenes/bg.png);
}

header dl, footer dl{
display:table;
width:100%;
margin:0;
}

header dt, footer dt{
display:table-cell;
}

header, footer{
background: #b4bfce; /* Old browsers */
background: -moz-linear-gradient(top, #b4bfce 0%, #889bb3 50%, #7f94b0 51%, #6d83a1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4bfce), color-stop(50%,#889bb3), color-stop(51%,#7f94b0), color-stop(100%,#6d83a1)); /* Chrome,Safari4+ */
background-sizeground: -webkit-linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* IE10+ */
background: linear-gradient(top, #b4bfce 0%,#889bb3 50%,#7f94b0 51%,#6d83a1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4bfce', endColorstr='#6d83a1',GradientType=0 ); /* IE6-9 */

left:0;
line-height:40px;
position:absolute;
right:0;
z-index:1;
}

header{
border-bottom:1px solid black;
top:0px;
}

header dt a, footer dt a{
background-size:120px 34px;
display:block;
line-height:40px;
margin:0 0 -1px 0;
text-decoration:none;
outline:0;
width:120px;
}

header dt:first-child a, footer dt:first-child a{
background:url(../imagenes/Button_Back.png) center no-repeat;
float:left;
padding-left:5px;
}

header dt:last-child a, footer dt:last-child a{
background:url(../imagenes/Button_Forward.png) center no-repeat;
float:right;
margin-right:2px;
padding-right:5px;
}

header dt, header a, footer dt, footer a{
color: white;
font-weight:bold;
text-shadow:0px -1px 1px #000;
text-align:center;
vertical-align:middle;
}

footer{
display:none;
}

section{
bottom:0;
left:0;
position:absolute;
right:0;
top:40px;
}

section nav{
background:white;
border:1px solid silver;
border-radius:10px;
margin:5px;
padding:0;
}

section dl{
margin:0;
width:0;
}

section dt{
border-top:1px solid silver;
}

section a{
color:black;
display:block;
line-height:40px;
padding-left:10px;
outline:0;
text-decoration:none;
}

@media only all and (max-device-width: 720px) and (orientation:portrait ) {

header span{
display:none;
}

section{
bottom:39px;
}

footer{
border-top:1px solid black;
bottom:-1px;
display:block;
}

} /*vertical*/
@media only all and (max-device-width: 720px) and (orientation:landscape) {

section{
bottom:0px;
}

footer{
display:none;
}

}/*horizontal*/