Adding a border to selected images

Since you want the border on most images, I would add

border: 1px solid #000;

to the CSS for “img,” then make a new class, like

.no-border
{
border: none;
}

At least I think that would work.

Then, in your posts, any time you don’t want the image to have a border, include class=”no-border” in the HTML img tag.

Thanks Marcy, however this adds borders to emoticons. Should be able to sort it our from here though, thanks.

One thing though, my stylesheet (Kubrick) has p img instead of just img.

How do I make a new class for borders? Will this work:

.border p img

Are the emoticons in the posts?

If not, you could create a class that would only apply in “post” divs.

#post img
{
border: 1px solid #000;
}

Otherwise I think you’re right that

.border p img

would work.

Yeah, emoticons are in posts, although I could just refrain from using them.

.border p img didn’t seem to work.

This was in the stylesheet:

p img {
padding: 0;
max-width: 100%;
}

So I added this:

.border p img {
padding: 0;
max-width: 100%;
border: 1px solid #000;
}

And then added class=”border” to one my images but it didn’t work. Any ideas?

Well, if you are going to add the class, what you’d just want to do is have it just as:

.border { style stuff here }

Great, that did the trick. I was also able to use this on linked images (by adding the border class), which overrides: a img { border: none; }

And then added class=”border” to one my images but it didn’t work.

I think you want

img.border { border: 1px solid black;}

p img {...} is just an image within a paragraph — I don’t think it matters for your case.

Out of interest, why would you use img.border as opposed to .border?

img.border would allow you to have seperate borders for different items. For instance, you can put a different kind of border around flash objects using object.border

its just more control.

My smilies within posts do not contain borders, yet they are images, and my other images do get borders ??

Out of interest, why would you use img.border as opposed to .border?

I depends — but in this case I was trying to be more specific, and also point out the problem with the previous selector:

.border p img {} means “an image in a paragraph in any element marked with class=border.” In your case, you wanted to refer to an image that was itself marked with class=border (img.border).

/* no borders on images... */
img { border: none; }
/* ...except ones marked as [img class="border"] */
img.border { border: 1px solid black;}

That’s the aspect of CSS I haven’t quite grasped yet — I know how to make a class and use it, but the greater specificity stuff is pretty new to me.

Glad you other folks stepped in to clear it up.

I’ve actually ended up adding the following to my stylesheet:

img.border {
border: 1px solid #000;
}

img.margin-r {
margin-right: 10px;
}

img.margin-l {
margin-left: 10px;
}

img.border-margin-r {
border: 1px solid #000;
margin-right: 10px;
}

img.border-margin-l {
border: 1px solid #000;
margin-left: 10px;
}

This then gives me the ability to control image borders and margins. Now, if only I could add a pulldown menu to the “Insert/edit image” popup window with these options!

I’ve actually ended up adding the following to my stylesheet:

img.border {...}

img.margin-r {...}

img.margin-l {...}

You can actually do it all with those three selectors, if you use multiple classes:

<!-- image with border -->
<img class="border" .../>
<!-- image with right-margin -->
<img class="margin-r" .../>
<!-- image with border and right-margin -->
<img class="border margin-r" .../>

Ah, cool, thanks.