Why does this CSS not get applied?

Question

0.00/5 (No votes)

See more:

I have several images:

<img id="imgPostTravelTop" name="imgPostTravelTop" src="images/1_PTE_Top_Jig.png" alt="post Travel image" height="280" width="350">
<img id="imgPostTravelTopRight" name="imgPostTravelTopRight" src="images/2_PTE_Top_Right_Jig.png" alt="post Travel image" height="275" width="350">
<img id="imgPostTravelCenter" name="imgPostTravelCenter" src="images/3_PTE_Center_Jig.png" alt="post Travel image" height="275" width="350">
<img id="imgPostTravelBottom" name="imgPostTravelBottom" src="images/4_PTE_Bottom_Jig.png" alt="post Travel image" height="275" width="350">

...that I want to put borders around. I tried this CSS:

img {
  border-width: 12px;
  border-color: navy;
}

...and it did nothing; so, I tried this on one of the images:

.image {
  border-width: 12px;
  border-color: navy;
}

<img class="image" id="imgPostTravelTop" name="imgPostTravelTop" src="images/1_PTE_Top_Jig.png" alt="post Travel image" height="280" width="350">
. . .

...but that doesn't give me a border (on that particular image), either. Why not?

Posted 22-Sep-15 12:39pm

B. Clay Shannon

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

George Jonsson · Accepted Answer · 2015-09-22T14:59:00

Solution 1

You need to add the border attribute, for example:

CSS

img {
  border : solid;
  border-width: 12px;
  border-color: navy;
}

Posted 22-Sep-15 14:59pm

George Jonsson

Updated 22-Sep-15 15:00pm

v3

Comments

Sergey Alexandrovich Kryukov 22-Sep-15 21:30pm

Correct, a 5. I added just 5 cents (well, less :-) in Solution 2. :-)
—SA

George Jonsson 22-Sep-15 22:16pm

Thanks Sergey.
Shortcuts are handy when you know what you are doing.

Sergey Alexandrovich Kryukov 22-Sep-15 22:39pm

Precisely. I hope our inquirer will get the message.
—SA

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-09-22T15:29:00

Solution 2

A shortcut for the style of Solution 1:

CSS

border : solid 12px navy;

—SA

Posted 22-Sep-15 15:29pm

Sergey Alexandrovich Kryukov