Problema con Chrome: border-bottom

#1 (**permalink**) 05/10/2010, 16:02

Hola foreros, quisiera saber si alguien me puede echar una manito con un problema que creo que es simple, se trata de lo siguiente:

Hice un menu el cuál tiene como borde (en el mismo span del texto) la propiedad:
border-bottom : 10px solid #4FBA00;

Es un borde 'grueso', y bueno, esto anda perfectamente bien en IE (se viene el fin del mundo) y en Firefox entre otros navegadores excluyendo a Chrome, el defecto en este es que el borde crece desde el fondo/final del span hacia arriba, en cambio (en los navegadores que se ve bien) el borde crece desde del fondo/final del span hacia abajo, les dejo una captura de ambas situaciones:

Forma correcta:

Forma defectuosa:

Aquí el fragmento de código HTML relevante:

Código:

<div id="menu"> <!-- menu -->
<div id="links"> <!-- links -->
<span class="menuItem"><a>NOTICIAS</a></span>
<span class="menuItem"><a>PROGRAMA</a></span>
<span><a>LINKS DE INTERES</a></span>
</div> <!-- /links -->
</div> <!-- /menu -->

Aquí sus propiedades CSS:

Código:

#links {
	border-bottom: 1px solid #DEDEDE;
	padding-bottom: 10px;
}

.menuItem {
	margin-right: 20px;
}

#links span {
	font-family: 'MyriadAppleSemibold';
	border-bottom: 10px solid #4FBA00;
}

Nota: El div#menu no tiene propiedades.

Eso sería, ojalá me puedan ayudar ya que el problema me pilló =/

Saludos y muchas gracias.

zerokilled · #2 (**permalink**) 05/10/2010, 18:22

a mi se me muestra correctamente en chrome... tendras otras propiedades afectando los elementos. te sugiero que revises los elementos con Developer Tool de chrome para determinar el caso.

#3 (**permalink**) 05/10/2010, 18:57

:O

Que raro.
Mejor dejo el código completo para ver donde está el error.

HTML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Felicidad ICF | Panel Administracion - Home</title>

<link rel="StyleSheet" type="text/css" href="../base/all/CSS/reset.css"/>
<link rel="StyleSheet" type="text/css" href="base/CSS/baseStyle.css"/>
<link rel="StyleSheet" type="text/css" href="../base/all/CSS/fonts.css"/>
<link rel="StyleSheet" type="text/css" href="home/homeStyle.css"/>
</head>

<body>
<div id="container"> <!-- #container -->
<div id="top"> <!-- #top -->
<div id="header"> <!-- #header -->
<a>Bienvenido(a) Administrador | </a><a href="#exit">Salir</a>
</div> <!-- /header -->

<div id="title"> <!-- #title -->
<span id="sist"><a>SISTEMA DE ADMINISTRACION</a></span>
<span id="icf"><a>FELICIDAD ICF CHILE</a></span>
</div> <!-- /#title -->

<div id="menu"> <!-- #menu -->
<div id="links"> <!-- #links -->
<span class="menuItem"><a href="noticias">NOTICIAS</a></span>
<span class="menuItem"><a href="programa">PROGRAMA</a></span>
<span class="menuItem"><a href="links">LINKS DE INTERES</a></span>
<span><a href="inscripciones">INSCRIPCIONES</a></span>
</div> <!-- /#links -->
</div> <!-- /#menu -->
</div> <!-- /#top -->

</div> <!-- /#container -->
</body>
</html>

CSS:

Código:

html {
	min-width: 900px;
}

body {
	padding: 0px;
	margin: 30px;
	background-color: white;
	font-family: 'MyriadAppleText';
	color: #4C4C4C;
}

a:link, a:visited {
	color: #4FBA00;
	text-decoration: none;
}

#header {
	padding-bottom: 4px;
	border-bottom: 1px solid #DEDEDE;
	text-align: right;
	font-size: 13px;
}

#title {
	margin: 40px 0 40px 0;
}

#sist { 
	color: #4FBA00;
	font-size: 18px;
	display: block;
}

#icf {
	font-size: 30px;
}

#sist, #icf {
	font-family: 'MyriadAppleSemibold';
}

#content {
	margin: 30px 0 30px 0;
	font-size: 13px;
}

#links {
	border-bottom: 1px solid #DEDEDE;
	padding-bottom: 10px;
}

.menuItem {
	margin-right: 20px;
}

#links span {
	font-family: 'MyriadAppleSemibold';
	border-bottom: 10px solid #4FBA00;
}

Nota: El CSS importado homeStyle.css no contiene reglas y font.css solo contiene importaciones de tipografías @font-face.

zerokilled · #4 (**permalink**) 05/10/2010, 19:23

por alguna razón que desconozco, ese error se muestra cuando usas el doctype transitional. si lo cambias a strict verás que el código actual funciona bien.

#5 (**permalink**) 05/10/2010, 20:59

Cita:

Iniciado por zerokilled

por alguna razón que desconozco, ese error se muestra cuando usas el doctype transitional. si lo cambias a strict verás que el código actual funciona bien.

:O

Tienes razón, ahí funciona, pero que raro, de verdad que me pilló :S
Muchas gracias, debe haber sido complicado descubrir que la falla (si se le puede decir así :S) estaba ahí. De verdad que muchas gracias :) te agradezco un montón.

Si alguien tiene alguna explicación del por qué funciona bien al cambiar el tipo de documento a Strict sería excelente.

Muchas gracias a todos una vez más!
:D

zerokilled · #6 (**permalink**) 05/10/2010, 21:44

pues es curioso y la verdad no tengo la explicación. estuve haciendo varias pruebas y pude encontrar cuando es que sucede dicho efecto. sucede cuando tienes dos elementos tipo lineal, uno dentro del otro. si el elemento padre tiene aplicado un borde que no incluya left y right, entonces se aprecia el defecto. a continuacion un ejemplo usando <strong> y <span>. sin embargo, el tercer <div> es curioso. el defecto desaparece cuando tienes un elemento lineal hermano con los mismo estilos. en fin, me parece que se trata de algun bug de chrome.

Código:

<!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=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>

</script>
<style type='text/css'>
div{
border:thin solid #ccc;
border-width:thin 0;
padding:1em 0;
margin:2em;
font-size:2em;
}

strong{
border-bottom:1em solid #3c3;
border-top:1em solid #3c3;
}

em{
border-bottom:1em solid #3c3;
}
</style>
</head>

<body>
<div><strong><span>defect</span></strong></div>
<div><strong>good</strong></div>
<div><strong><span>something</span></strong> <em>curious</em></div>
</body></html>

#7 (**permalink**) 05/10/2010, 21:58

La verdad no tengo idea, aún así muchas gracias por tu ayuda, saludos!

kseso? · #8 (**permalink**) 06/10/2010, 06:09

Sin hacer pruebas.
Ese etiquetado me chirría un montón:

Cita:

<div id="links"> 
<span class="menuItem"><a href="noticias">NOTICIAS</a></span>

Un span conteniendo un enlace. Recuerde que el span debería diferenciar una parte del todo del mismo elemento. Esto es, un grupo de palabras dentro de un párrafo. Una parte de un enlace, etc.
Por otro lado tiene, como ya han apuntados dos elementos de línea alineados, y algunas propiedades tienen comportamientos "particulares"

Y lo más importante, la semántica o etiquetado correcto de los elementos.
Use una lista /ul-li-a/ y se evitará:
El div /links/ que sería el tag /ul/
Los spans que serían los /li/ con el borde inferior verde
Y los enlaces /a/ lo seguirán siendo, pero de bloque y con el páding correspondiente para separarlos entre ellos y del borde inferior verde.

Creo que con esta estructura no debería tener esos inconvenientes.

#9 (**permalink**) 06/10/2010, 07:11

Excelente Kseso, toda la razón, debí haber usado un <ul> desde el comienzo, así funciona perfectamente declarando el tipo de documento como Transitional :D

Muchas gracias Kseso y a todos los que respondieron para ayudarme, se los agradezco un montón, adiós foreros, nos estamos escribiendo por ahí en algún post.

SOLUCIONADO!