homepage Welcome to WebmasterWorld Guest from 54.197.171.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS: Image border colour control
Border colour control on: links, Visited, non-link images.
kapow




msg:1182658
 5:54 pm on Nov 18, 2002 (gmt 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 }

 

Nick_W




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

Here ya go...

img {
border: 1px solid #666666;
}

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

Nick

kapow




msg:1182660
 7:00 pm on Nov 18, 2002 (gmt 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?

Nick_W




msg:1182661
 7:03 pm on Nov 18, 2002 (gmt 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

tedster




msg:1182662
 7:08 pm on Nov 18, 2002 (gmt 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.

kapow




msg:1182663
 8:37 pm on Nov 18, 2002 (gmt 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">

Nick_W




msg:1182664
 9:38 pm on Nov 18, 2002 (gmt 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

kapow




msg:1182665
 10:37 am on Nov 19, 2002 (gmt 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">

Nick_W




msg:1182666
 10:56 am on Nov 19, 2002 (gmt 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

SuzyUK




msg:1182667
 11:02 am on Nov 19, 2002 (gmt 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
:)

kapow




msg:1182668
 11:10 am on Nov 19, 2002 (gmt 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?

Nick_W




msg:1182669
 11:19 am on Nov 19, 2002 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved