Ignoring a CSS tag

January 12, 2005 10:22 AM

I am building a website using css. I have it setup so that it automatically places a border around my images. How can I make one image ignore this css tag?
posted by chiababe to computers & internet (10 comments total)

add an overriding style attribute to the img tag::

<img src="something.jgp" style="border:none;">
posted by theFlyingSquirrel at 10:29 AM on January 12, 2005

Give it a certain class and tell css to have a border: none for that class.
posted by Skyanth at 10:30 AM on January 12, 2005

I would argue that you should give your img's that need a border a special class, like "photo", and then style that. Gives you more flexibility than styling img itself.
posted by smackfu at 10:30 AM on January 12, 2005

Thank you FlyingSquirrel. That worked perfectly. I now realize that I was totally over thinking this.
posted by chiababe at 10:32 AM on January 12, 2005

Actually chiababe, the answers of Skyanth and smackfu are more robust. If there's any chance that you would need to do this for more than just one image, it's more flexible to have another defined class that has the no border and assign that class to the images.

(And, no, I don't know what type of file a ".jgp" is...)
posted by theFlyingSquirrel at 10:40 AM on January 12, 2005

What you also might want to do is something like:

.killborder{
border-color:transparent;
}

That way, if you've got a row of images lined up, the image with no border look lower than the images with the borders on.
posted by TheDonF at 11:10 AM on January 12, 2005

Er, ...WON'T look lower than...
posted by TheDonF at 11:11 AM on January 12, 2005

Smackfu & skyanth do what I would do.

Also, if it's feasible, I've lately been ensuring that any element I might want to have a special state has an ID attribute. That way I can statically (or dynamically) write a CSS statement in the head which changes the attributes of that image (or other element) on just that page. I.e., you could kill borders on that specific element.

I use this technique it to create lightweight, degradable "expanding" category menus for static sites, and to change the appearance of menu elements depending on the "category" of the page. This way, no change needs to be made to the code of the specific element, only to code in the head container (where it's easy to find and manage).

OT, but in case you're curious, the technique works like this: I put submenus for a category into a container that's invisible by default; that would let me set that up as a single shared element in the template. Then when each new page is created, the page creator just needs to change element name[s] on a css element in the document head to make the page appear as it should.

It lets me give people a relatively simple way to build from templates and get a lot of the effect of dynamically generated pages.

Using CSS this way degrades well, because the expanded menus just display if CSS isn't supported (for some strange reason).
posted by lodurr at 11:24 AM on January 12, 2005

I do kind of the opposite:

img {
border:0;
}

.sample img {
border:1px solid #ccc;
}

.sample a:hover img {
border-color:#900;
}

So most of the images on my site don't have a border, and thumbnails have a gray border that turns red if you mouse over them.
posted by kirkaracha at 11:29 AM on January 12, 2005

img {
border:0;
}

Should be "border: none", shouldn't it?
posted by yerfatma at 2:12 PM on January 12, 2005