A bug in CSS: An Overview?


#1


Unit 4: Introduction to CSS
LESSON: CSS: An Overview

I can't find anything wrong with my code and still it says this:
"Oops, try again.
Did you remember to give your image a 1px solid #4682b4 border?"

My browser is set to 100 % so no zoom and so Ctrl+0 doesn't help.


HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    </head>
    <body>
        <h1>Moi</h1>
        <p>Blaa</p>
        <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png" />
    </body>
</html>

CSS:
img {
    height: 100px;
    width: 300px;
    border: 1px solid #4682b4;
}

h1 {
    font-family: Verdana, sans-serif;
    color: #576D94;
}

p {
    font-size: 18px;
    color: #4A4943;
    font-family: Garamond, serif;
}


#2

@teraninja06781,
Could you provide a link to the lesson...??


#3

Like this?
https://www.codecademy.com/courses/web-beginner-en-TlhFi/4/4?curriculum_id=50579fb998b470000202dc8b


#4

@teraninja06781,
What do you get when using

<!DOCTYPE html>
<html>
	<head>
	    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
		<title>Result</title>
	</head>
	<body>
	    <h1>Big heading</h1>
	    <img src="http://bit.ly/NnVbxt"/>
	    <p>Excellent paragraphs start with a capital letter and end with a period, and they ideally have several related sentences on a given topic in between the capital letter and the period.
	    </p>
	    <script>
	    var $borderWidth = $('img').css("borderTopWidth") ;
	    var $borderColor = $('img').css("borderTopColor") ;
	    var $borderStyle = $('img').css("borderTopStyle") ;
	    $('p').prepend($borderWidth +" "+
	                   $borderStyle +" "+
	                   $borderColor +" ");
	    </script>
	</body>
</html>

and the CSS

h1 {
    font-family: Verdana, sans-serif;
    color: #576D94;
}
p {
    font-size: 18px;
    color: #4A4943;
    font-family: Garamond, serif;
}
img {
    height: 100px;
    width: 300px;
    border:1px solid #4682b4;
}

I got a pass using a windows 8.1 IE11 environment.
with a mentiong in the paragraph
1px solid rgb(70, 130, 180)

Reference::
https://developer.mozilla.org/en-US/docs/Web/CSS/border
http://api.jquery.com/css/
http://api.jquery.com/prepend/
http://api.jquery.com/attr/


#5

I get the same Oops, try again message..


#6

@teraninja06781
But what did you get displayed
in the Start of your TEXT of the p-Tag paragraph ???


#7

Oh, sorry. Didn't understand. I got "0.8px solid rgb(70, 130, 180)"


#8

@teraninja06781
Having
0.8px instead of the required 1px
is the proof that you have sizing problem

Which Browser are you using ???


#9

I am haveing the exact same problem. The border shows up so I dont understand what the problem is. I am on windows 7, google chrome browser. zoom is set to a normal %100.


#10

@megaace03919
Maybe
I'm using Chrome.
font-size is 16.3636360168457px instead of 16px.
You have to enter the 'Settings' => 'Advanced settings' (in the very bottom)
and to chose 100% in the Page scale (in my browser it was 125%).
http://www.codecademy.com/forum_questions/5562cbbe93767652470006d0


#11

I'm using Mozilla Firefox 47.0


#12

Check your browsers zoom and make sure its on 100%


@megaace03919 Please paste in your code


#13

html

    <h1>Anything I want!</h1>
    <img src="http://bit.ly/NnVbxt"/>
    <p>More of anything I want!</p>

</body>

CSS

img {
height: 100px;
width: 300px;
border: 1px solid #4682b4;
}

message on submission - "Oops, try again.
Did you remember to give your image a 1px solid #4682b4 border?"


#14

The zoom fixed it. Thanks


#15

@teraninja06781
I can be of no assistance in the area of Browser-specifities....
== the Book ==
https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

use the HTML-code i gave you
and do some experimenting....

( read something of viewport should be specified )


#16

Ok I figured it out.
I use Mozilla Firefox. I had to put page zoom to 80% and then it changed the border from 0.8px to 1px.
The script you provided was a big help in this. So thank you for your assistance!


#17