Posicionamiento CSS - Bordes


#1

Hola,
en el curso HTML & CSS - Traducción al Español (América Latina) tanto en el ejercicio "Ver para creer" como en "Bordes" de la sección "Posicionamiento CSS" tengo problemas con el color de borde, sale constantemente el mensaje:

"¡Uy! Probá otra vez. Parece que el color de tu borde no es #FF0000 ( o color correspondiente)"

código de stylesheet.css
div {
height: 50px;
width: 100px;
border-width: 4px;
border-color: #FF0000;
border-style: solid;
border-radius: 5px;
background-color: #308014;
margin: 20px 50px 10px 5px;
}

también he intentado

div {
height: 50px;
width: 100px;
border: 4px solid #FF0000;
border-radius: 5px;
background-color: #308014;
margin: 20px 50px 10px 5px;
}

alguien puede ayudarme a encontrar el fallo?


#2

Reemplace el código HTML con este

<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<div id="test"></div>
		<p class="test"></p>
	</body>
	<script>
	function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
     function toHex(n) {
             n = parseInt(n,10);
             if (isNaN(n)) return "00";
             n = Math.max(0,Math.min(n,255));
             return "0123456789ABCDEF".charAt((n-n%16)/16)
             + "0123456789ABCDEF".charAt(n%16);
      }
    var R,G,B;
	var elt = document.getElementById("test");
    var out = "";
    var comma = ',';
    var st = elt.style;
    var cs = window.getComputedStyle(elt, null);
    for (x in st) {
    //  if ( x.indexOf('fontFamily',0) !== -1) {
    //  if ( x.indexOf('border',0) !== -1) {
    //  if ( x.indexOf('back',0) !== -1) {
      if ( x.indexOf('borderBottomC',0) !== -1) {
//        out += "  " +
//        x + " = '" + st[x] +
//        "' > '" + cs[x] + "'\n";
        out = cs[x].substring(cs[x].indexOf('(')+1,cs[x].indexOf(')'))
        nA= out.split(comma);
        R = nA[0];
        G = nA[1];
        B = nA[2];
      }
    }
    out = rgbToHex(R,G,B)
    $('.test').text(out+' HEX <==>RGB '+nA[0]+"-"+nA[1]+"-"+nA[2])
    </script>
</html>

e informar de lo que se ve como resultado
ya que creo que su navegador sustituye al código de color


#3

gracias por tu rápida respuesta, el resultado aparentemente es correcto:

FF0000 HEX <==>RGB 255- 0- 0 en "Posicionamiento CSS - Bordes"
y

0000FF HEX <==>RGB 0- 0- 255 en "Posicionamiento CSS - Ver para creer"

Pruebas realizadas en Firefox 41.0.2 e IE 11


#4

Has probado...
en determinadas circunstancias se puede disparar su Browser en un
estado incoherente.

Para ello es de una ventaja de saber que usted tiene ** 2 instalaciones reset **:

** ** Uno es el uso de la tecla F5 que hace un refresh Browser

y

** Dos **, select y copy su código ** **
A continuación, utilice el botón Reset Code de la ventana de aprendizaje,
entonces paste su código ** ** de nuevo.

** Adición **
Notas generales:
Siempre actualizar el navegador después de hacer correcciones:
CTRL f5 (si en Windows o Linux)
CMD r (si en un MAC).


#5

hola, leonhard_wettengmx_n.

efectivamente, he leido otros post tuyos donde indicas este estado, y la solución de "reset" y F5, por ello aunque habitualmente trabajo con Firefox, tambien he realizado las pruebas en IE 11, es mucha casualidad es que en ambos navegadores se repita el mensaje.

Vuelvo a intentarlo nuevamente, pero agradeceria nuevas pruebas a realizar, en breve te indico el resultado.

gracias.


#6

Efectivamente, tras realizarlo nuevamente obtengo el mismo resultado.

alguna otra prueba para realizar.


#7

Prueba esto

/*CSS codigo */

* {
border: 1px dashed black;
}

div {
height: 50px;
width: 100px;
border: 4px solid #ff0000!important;
border-radius: 5px;
background-color: #308014;
margin:20px 50px 10px 5px;
}


#8

hola leonhard_wettengmx_n,

he realizado un copy/paste literal del código css y BINGO!!!

muchas gracias por la ayuda, quisiera aprender donde residia el problema si no es mucha molestia y si no estas muy ocupado (quizás ff0000 en vez de FF0000?).

Personalmente doy el hilo por cerrado, gracias por la solución.


#9

@digitalslayer17280,

Prueba los siguientes casos:

caso 1:

/* CSS codigo */
* {
border: 1px dashed black;
}

div {
height: 50px;
width: 100px;
border: 4px solid #ff0000;
border-radius: 5px;
background-color: #308014;
margin:20px 50px 10px 5px;
}


Caso 2:

/*CSS codigo */

/* {
border: 1px dashed black;
}
*/
div {
height: 50px;
width: 100px;
border: 4px solid #ff0000;
border-radius: 5px;
background-color: #308014;
margin:20px 50px 10px 5px;
}


Caso 3:

/*CSS codigo */

/* {
border: 1px dashed black;
}
*/
div {
height: 50px;
width: 100px;
border: 4px solid #ff0000!important;
border-radius: 5px;
background-color: #308014;
margin:20px 50px 10px 5px;
}


Caso 4:

/*CSS codigo */

/* {
border: 1px dashed black;
}
*/
div {
height: 50px;
width: 100px;
border: 4px solid #FF0000!important;
border-radius: 5px;
background-color: #308014;
margin:20px 50px 10px 5px;
}


Tiene una lectura, para obtener una idear de lo que está cocinando ..
= http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
= http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
= https://css-tricks.com/specifics-on-css-specificity/
= http://stackoverflow.com/questions/30369043/color-rendering-differents-in-firefox-and-chrome


#10

hola leonhard_wettengmx_n,

he probado los diferentes casos y extrañamente hoy EN TODOS LOS CASOS salia el error, puede que tenga algún problema en el ordenador que no funcione bien ajax, he realizado pruebas con el inspector de firefox y tengo disponible un fichero HAR en el cual tengo varios intentos fallidos y un intento correcto.

Si eres parte del equipo codecademy estaria encantado de suministrarte dicho fichero, si eres un usuario avanzado o admin del blog, comprenderas que no pueda suministrartelo por tema de seguridad.

un saludo


#11

@digitalslayer17280,

En la versión Inglés al test_function parece:
"$e('div').to.have.css('border-color','#FF0000',\"It looks like your border-color isn't #FF0000.\");\n$e('div').to.have.css('border-style','solid',\"It looks like your border isn't solid.\");\n$e('div').to.have.css('border-width','4px',\"It looks like your border isn't 4px wide.\");"

HTML code

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<div id="test"></div>
		<p class="test"></p>
		<p class="test2"></p>
	</body>
	<script>
var borderColorFF0000 = $('div').css('border-color') == '#FF0000';
var borderStyleSolid = $('div').css('border-style') == "solid";
var borderWidth4px = $('div').css('border-width') == "4px";
$('.test').text(borderColorFF0000+' '+
            borderStyleSolid+' '+
            borderWidth4px);
//
var borderColorFF0000 = $('div').css('borderTopColor');
var borderStyleSolid = $('div').css('borderTopStyle');// == "solid";
var borderWidth4px = $('div').css('borderTopWidth');// == "4px";
$('.test2').text(borderColorFF0000+' '+
            borderStyleSolid+' '+
            borderWidth4px);
        </script>
   </body>
</html>

#12

he introducido tu código en el programa y el resultado ha sido una pantalla en blanco.

Despues me he dado cuenta que no habias cerrado la etiqueta 'script', finalmente el resultado es:

false false false
rgb(255, 0, 0) solid 4px

creo que ya has dado con el problema.