Welcome to WebmasterWorld Guest from 23.20.18.183

Forum Moderators: not2easy

Message Too Old, No Replies

CSS: Image border colour control

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

     
5:54 pm on Nov 18, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


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 }

6:01 pm on Nov 18, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Here ya go...

img {
border: 1px solid #666666;
}

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

Nick

7:00 pm on Nov 18, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


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?

7:03 pm on Nov 18, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


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

7:08 pm on Nov 18, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

8:37 pm on Nov 18, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


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">

9:38 pm on Nov 18, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


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

10:37 am on Nov 19, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


> ...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">

10:56 am on Nov 19, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


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

11:02 am on Nov 19, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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
:)

11:10 am on Nov 19, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


> 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?

11:19 am on Nov 19, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


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