Problems with Size and borders - Set to 100px yet error message


#1

I am stuck on the Size and borders

I set the height to 100px yet get an error message that it looks like the image height is set a 135px

???? Not sure what is going on nothing is set to 135px

Any help would be greatly appreciated -- I refreshed my browser which is google chrome

Thanks Frederick Musser


#2

Please include your code in the post. Once you do, I'll be able to help you resolve the problem :smile:


#3

Thanks for quick response - I changed the image and now the error message is:..................
Oops, try again. It looks like your image is 300px high instead of 100px high.
Problem is the height is set to 100px not 300px???

Thanks Frederick Musser

<!DOCTYPE html>
<html>
	<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
        <h1>code Is Great</h1>
    <p>Great stuff  Is great too</p>
    
    <img src="http://bit.ly/NnVbxt">
	</body>
</html>

Here is 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;
}

#4

The problem is in this block of CSS:

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

You must be sure to end each key:value; pair with a semicolon (;), otherwise the parsers will try to keep parsing.

The grader thinks height is 300px, because you never told the parser to stop parsing the height key :smile:


#5

Had the same problem. Thanks a lot!


#6

AHHHHHHHHHHHH The light bulb went off!!! THanks For your help!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


#7

Hello Jacob

Can you help with my coding? I believe everything is perfect but idk why is it not working...

here's the html & CSS


#8

and here's my html, the site wont let new users upload 2 pics at once


#9

image is not a valid tag in HTML. You need to use img.


#10

It worked. Thank you SO MUCH for the super fast reply!! :sweat_smile:


#11

That's to prevent overuse of images. You should copy and paste your code in text format rather than picture format next time.


#12

Hello Jacob, i've got the same problem at this stage. With both my HTML and CSS codes valid (at least they seem accurate). Been at it for days. Now i'm just confused. Here's my HTML...

 <!DOCTYPE html>
 <html>
    <head>
       <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
       <title>Result</title>
    </head>`
    <body>
    
    <h1>Welcome! I'm DSoupKitchen.</h1> 
    
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTOX2ZAPy9dJS76xeglSrZY6mx_3CHzLdEyOjYNsnVKzwoVdNxb"/>
       <p>Try me and I'll keep just about any busy professional, bachelor or soup hungry titan hassle free from making their own pots of soup when needed. See Our Bowl Litre sizes to match your plans and busy schedules.</p>`indent preformatted text by 4 spaces`
</body>
 <html/>

#13

can we see your css code? What is the error message? is your browser zoom set to 100%?


#14

Here's my CSS...

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

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

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


#15

code is fine. what about the other two questions i asked? If your zoom is right, you hit a glitch, try a different browser as workaroudn


#16

You were right about the zoom Stemim. Thanks a bunch. You're a G.


#17

my css code gives an error: "your forgot to give your image a border of 1px", yet this is my code. What's wrong?

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

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

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

#18

Can you post the instructions and the HTML for which this CSS defines the style?


#19

sure,

1.Add an to your HTML document. Its src attribute can point anywhere! (Check the Hint if you're stuck or need a picture.)
2.On the CSS tab, set your image's height to 100px and width to 300px.
3.On the CSS tab, give your image a border of 1px solid #4682b4.


#20

Thank you, I fixed the zoom. and it worked.