border around image anchor tags?

[c q]

Hey all... I've been struggling a while now...
unable to get rid of this stupid blue/pink border around the images when i enclose them in the anchor tag. I want the border to be there, but in Black color.

used the border color property of css but to no avail.
is it me or is it geocities screwing up my page again :confused:

here's da page am talking about http://www.geocities.com/kohimaorphanage/waitingchildren1.html

thanks in advance for pointers folks :)

[c q]

hokay... exceeded bandwidth.... please to be trying after half an hour.

[_Aerospace_Eng_]

<style type="text/css">
a img {
border:2px solid #000;
}
</style>
Add the above in between your head tags.

[MattyUK]

I use this CSS code to remove all borders from IMG's in A's.
a img {
border: 0px none;
}

You could adapt as follows:
a img {
border: 1px solid #000000;
}

Let me know if it helps. I didn't view your page so can't comment on its use within that setting.

Edit: Pipped to the post I see. :)

[c q]

I am actually using just
a {
border:#000000;
}

in the style sheet. but aparently, it did not help.
and problem in adding a border width in this style sheet as aero suggests, is that it will cause all anchor elements to get a border. i want a border only on images.
:D

[ronaldb66]

The selector "a img", as _Aerospace_Eng_ stated, should target only images that are descendants of a link; if this isn't specific enough, you might want to supply some more info about how these images might be identified in the style sheet.

Oh, and the compound "border" property requires width, style and color to be visible since border style is default "none" (width is default "medium", which most of the time is too much of a good thing).


Augh! I took a look at the page in question; you might want to try: td div a img {
border: 1px solid #000;
} since tables sometimes require a bit more specificity.

[MattyUK]

I remember when I was learning. Ahh well a recap of approaches for you C Q


a img {
border: 0px none;
}
Takes any IMG tag inside an A tag and sets the border property to 0pixels, style as none and misses out the colour setting.

a img {
border: 1px solid #000000;
}
Takes any IMG tag inside an A tag and sets the border to 1pixel solid style and colour black (hex code for colour).

td div a img {
border: 1px solid #000;
}
This takes any IMG tag, that is inside an A tag which itself is inside a DIV tag which itself is inside a TD tag. It sets the border as 1pixel, solid style and black (rgb style colour definition).

This site has a good rundown on selectors if you want to learn more:
http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm
http://css.maxdesign.com.au/selectutorial/

This code:
a {
border:#000000;
}
Takes any A tag and doesn't do anything. This is because "border:" looks for width first then a space then style then a space then colour.
Ronaldb66 summed it up well.
Oh, and the compound "border" property requires width, style and color to be visible since border style is default "none" (width is default "medium", which most of the time is too much of a good thing).
So it thinks you have set a width to #000000 missed out the style and colour. nothing gets displayed.

To set the colour and colour alone you could try:
border-color: #000000; But the rule you were using would only set the border (or border-color) property on the A tag alone. It is true sometimes things can cascade downwards and be picked up by child elements. But in this case you don't need to worry about that, this is not one of those occasions. Personally at this stage of learning I'd never rely on it and code as if it never happens. You can then be surprised or horrified when it does and tread that learning curve at that point.

Also a good idea to author a small test page with just the code you are interested in and see if you can get it to work one method or the other on that. then re-integrate into the larger page and se if it holds firm.

I have reworked and explained in more detail much of the info already posted here by the other contributers. I suspected you may have needed a more detailed rundown after seeing the rule you tried to use and thought this small "lesson" might have helped. Forgive me if I aimed it at the wrong level. Good luck and have fun.

MattyUK

[c q]

sorry sorry ppl... the code i was using was:

border-color:#000000;

tho i still have absolutely no idea why this isn't working by itself... but I kinda liked the idea of

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


will try it out n post back if i experience further problems. tho it looks like this solution should work.

thanks all :)

[MattyUK]

sorry sorry ppl... the code i was using was:

border-color:#000000;

tho i still have absolutely no idea why this isn't working by itself...

Because your rule:
a {border-color:#000000;} Was assigning the border colour to the A tag not the IMG tag. As I understand it, it is the IMG tag that gets the border you are trying to customise not the A tag. Right approach, wrong tag target. You had misdirected your initial efforts. Hence the rules posted here that should work since they correctly target the item with the border you wish to customise.

Hoping that explanation helps.

[c q]

am zorry...... but the img border thngy isn't working either :eek:

[MattyUK]

I don't see the code. Are you adding it in the right place?

add:
a img {
border: 1px solid #000000;
}
OR
td div a img {
border: 1px solid #000000;
}

To the tail end of div.css loaded by waitingchildren1.htm
AND take the border="0" out of the IMG tag attributes.
<img area="11760" src="pics/pc_5.jpg" border="0" height="112" width="105">
should become:
<img area="11760" src="pics/pc_5.jpg" height="112" width="105">

After all its no good telling the browser via CSS to have a 1 pixel black border around all images then later in the page saying "but not around this image" by having border=0 there.

[c q]

hokay... i'd actually decided to do my experiments in the inner pages instead of the 1st page... ** AND pulled out the borders alltogether in all pages cuz the site is officially launching tomorrow... dont want ugly blue borders during the launch. **


http://www.geocities.com/kohimaorphanage/waitingchildren2.html

anyhow, the code i used looks like: and its within the style sheet in the head section of the page.

a img {
border:'1px' 'groove' '#000000' ;
}

(this i generated from dreamweaver... so i guess its right... except maybe the "a img" part. if only i knew.......

[Bill Posters]

a img {
border:'1px' 'groove' '#000000' ;
}

(this i generated from dreamweaver... so i guess its right... except maybe the "a img" part. if only i knew.......

Remove the quotes/apostrophes.
(I find it strange that DW would add them. Sure you didn't somehow introduce them yourself?)

Anyhoo…
a img {
border: 1px groove #000000;
}
…as posted multiple times already.

[c q]

hokay... i'd actually decided to do my experiments in the inner pages instead of the 1st page... ** AND pulled out the borders alltogether in all pages cuz the site is officially launching tomorrow... dont want ugly blue borders during the launch. **

anyhow, the code i used looks like: and its within the style sheet in the head section of the page.

a img {
border:'1px' 'groove' '#000000' ;
}

(this i generated from dreamweaver... so i guess its right... except maybe the "a img" part. if only i knew....

[c q]

okkie ppl.... atleast the test page is now workin fine

http://www.geocities.com/kohimaorphanage/test.html

plz to be watching this space if i encounter any more difficulties with this border...

[Bill Posters]

Fwiw, a 1px border width isn't enough to show the 'groove' effect.

[MattyUK]

Yup I'd agree with Bill.

Not sure you need the ' either.

a img {
border:'1px' 'groove' '#000000' ;
}
to:
a img {
border:1px groove #000000;
}

Would be just as fine.

If you want to understand the "a img" selector you can read up on them in the previous links posted. "a img" simply means where there is an "img" tag within an "a" tag.

Not that these tags exisit but "curve learning" would mean when there was a "learning" tag within a "curve" tag.

Hope this all helps.