CSS: Image border colour control

Border colour control on: links, Visited, non-link images.

[kapow]

Using CSS: How do I get rid of the 3d effect of an image border colour? i.e. so the border is all one colour - not two colours.

How do I control the image border colour for link and visited? (and prevent the 3d effect on linked image borders too).

I have the following in my CSS but I get the 3d effect and I get differnt colours for visited:

img {border-color:" #666666 ";}
a:link { color: #9966FF }
a:visited { color: #9966FF }

[Nick_W]

Here ya go...

img {
border: 1px solid #666666;
}

You could use border-width etc but the shorthand is easier ;)

Nick

[kapow]

Thanks Nick_W

but I have some large images on the site with a 3px border and some icons with a 1px border. So can I contol the colours in CSS but contol the border width in the html?

[Nick_W]

Actually I dont think so.

Why not create different classes for the different styles of border/thikness/color?

That would make most sense to me. Or just use inline styles...

Nick

[tedster]

Nick's on the money, from my experience. Using different classes is the most straightforward way to handle situations like this. When it comes time to make changes, you'll be glad you did.

I don't usually go for inline styles, except in a pinch. I like my HTML really clean, so that even a non-techie could read it easily. Spiders seems to like that approach as well.

[kapow]

Something like this?:

#piclarge
.img {border-color:#666666; border-bottom: 3px solid;}

#picsmall
.img {border-color:#666666; border-bottom: 1px solid;}

then in the html:

<img src="images/image1.jpg" class="piclarge" width="567" height="443">

[Nick_W]

Yep. kind of ;)

.piclarge {
border-color: #666666;
border-bottom: 1px solid;
}

Also, unless you're using tables you can drop the height and width attributes...

Nick

[kapow]

> ...unless you're using tables you can drop the height and width attributes...
Thats really useful! - is it safe in all popular browsers to drop the height and width attributes?

Is this how to assign a class to an image?:
<img src="images/image1.jpg" class="piclarge">

[Nick_W]

Sure is...

The height and width (correct me if I'm wrong guys) is not needed or required in html 4.01 and up. The reason they are used is to give tables a helping hand whilst being rendered. Just makes it a bit faster.

With a non-tables layout, as long as you're happy with your design 'flowing' into the browser window they are not needed.

Hope that helps..

Nick

[SuzyUK]

Hi Nick I thought they were required to aid browser rendering...

i.e. if you've a large graphic that takes time to load and you don't specify the height and width..the rest of the page won't render until graphic has loaded..

by giving the graphic it's attributes, the page "knows" how much space to leave and continues rendering the rest of the page regardles of whether graphic has finished loading

but that could be my misunderstanding..

Suzy
:)

[kapow]

> as long as you're happy with your design 'flowing' into the browser window.

Yes, I think it is better to design sites that flow.

Moving slightly away from the original question: I get a problem with images overlapping text when the browser window is much reduced (using 'align="right"' in the html). Can this be prevented with CSS / DIV?

[Nick_W]

Sure, to a point.

By giving your image a margin like

.largepic {
margin: 5px;
float: right; /* to replace your align="right" */
}

You should stop the image from mixing it up with the text. However, once your text squezes down to the length of the longest word in the block there's not much you can do about it...

Suzy, good point! If I have time I'll have to try look that up...

Nick