Foros del Web » Creando para Internet » CSS »

Problema con Chrome: border-bottom

Estas en el tema de Problema con Chrome: border-bottom en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/10/2010, 17:02
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Problema con Chrome: border-bottom

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.

Última edición por de-troit; 05/10/2010 a las 17:35
  #2 (permalink)  
Antiguo 05/10/2010, 19:22
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con Chrome: border-bottom

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 05/10/2010, 19:57
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema con Chrome: border-bottom

: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.

Última edición por de-troit; 05/10/2010 a las 20:04
  #4 (permalink)  
Antiguo 05/10/2010, 20:23
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con Chrome: border-bottom

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 05/10/2010, 21:59
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema con Chrome: border-bottom

Cita:
Iniciado por zerokilled Ver Mensaje
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
  #6 (permalink)  
Antiguo 05/10/2010, 22:44
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con Chrome: border-bottom

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>
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 05/10/2010 a las 23:01
  #7 (permalink)  
Antiguo 05/10/2010, 22:58
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema con Chrome: border-bottom

La verdad no tengo idea, aún así muchas gracias por tu ayuda, saludos!
  #8 (permalink)  
Antiguo 06/10/2010, 07:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con Chrome: border-bottom

Sin hacer pruebas.
Ese etiquetado me chirría un montón:
Cita:
<div id="links"> <!-- #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)  
Antiguo 06/10/2010, 08:11
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema con Chrome: border-bottom

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!

Etiquetas: border-bottom, chrome
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:05.