SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Oct 9, 2007, 16:08 #1
- Join Date
- Jun 2003
- Location
- _root.europe.uk.london
- Posts
- 965
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Removing link decoration from an image while still keeping a border
I've come across a problem with the images I'm using as links.
I want to remove the ugly blue border that naturally comes from using an <a> tag with an image ... but I still want to include a dotted right border to separate the image from the following picture.
You can see what I mean by looking at the icons in the top right hand corner at http://www.theshortstack.co.uk
I've tried using the following CSS:
PHP Code:img.firsticon {
padding-right: 5px;
}
img.firsticon a{
text-decoration: none;
}
Would somebody be able to point out where I'm going wrong please?
Thanks very much
-
Oct 9, 2007, 17:11 #2
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You have to first remove the border, and then add the left one if desired :
Code:img.firsticon { padding-right: 5px; border: 0; } img.icons { border: 0; border-left: thin dotted #cccccc; padding-left: 5px; padding-right: 5px; }
-
Oct 9, 2007, 23:47 #3
- Join Date
- Jun 2003
- Location
- _root.europe.uk.london
- Posts
- 965
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Oct 10, 2007, 00:40 #4
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No, that means an image contained within an anchor element with the class of "firsticon", which does not apply to your html either. The images in question have the classes, so can be targeted as in the code block I posted - no reference to the <a> is required.
-
Oct 10, 2007, 01:57 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I always use the following to kill all image borders from the start.
Code:a img {border:none}
(Also remember that text-decoration is on the anchor itself and not on the image.)
Bookmarks