Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-12-23 18:44:26
- jstur8jv
- Member
- Registered: 2006-12-23
- Posts: 23
How do I completely remove the border around linked images?
I’ve searched the forum/internet/wikki, and can’t figure it out. There’s some textpattern-specific problem, as the CSS I use in other sites simply isn’t working with my textpattern site; no matter what I do, linked images have borders around them—specifically, at the bottom, which is where I specify a border for my other links.
The CSS for regular, non-image links:
a {text-decoration: none;color: #0000FF;border-bottom: 1px solid #0000FF;}
a:hover {color: #800000;border-bottom: 1px dotted #800000;}
and for images:
a img {border:none;}
The bottom border and hover effect are both being applied to the image links, even though they shouldn’t be.
It’s as though the a img rules are being overridden by the other link rules, which should not be the case. If nothing else, the a img rule is lower on the (only) stylesheet; if there were any conflicts, the a img should win, right?
Please let me know if I’m missing something.
I saw in another thread that floating the images would solve the problem, but that’s inelegant and when I tried it, it only worked in IE.
This is driving me crazy!
Last edited by jstur8jv (2006-12-23 18:47:52)
Offline
Re: How do I completely remove the border around linked images?
Nope, it’s not textpattern specific.
put:
a img {
border: 0;
}
but, no, it’s not textpattern specific, it’s css specific and your CSS is wrong.
Oh, another thing you should watch out for. When you hover over the linked image, because it has no border added to it before hover, you are adding two pixels to the width and 2 to the height, so you might see your design shift a bit.
Last edited by Walker (2006-12-23 19:12:13)
Offline
Re: How do I completely remove the border around linked images?
A URL would be helpful, but you can try: #containingElement a img { border: 0 } or worst case, a img { border: 0 !important }.
Does the CSS from other sites match the HTML, as in the same elements are defined (id’s, classes, HTML)?
Offline
#4 2006-12-23 21:17:32
- jstur8jv
- Member
- Registered: 2006-12-23
- Posts: 23
Re: How do I completely remove the border around linked images?
I realize now that I misspoke myself when I said I was using the same CSS that worked properly in another site.
The difference that made a difference is that instead of using a text underline with Textpattern, I tried a new thing, namely giving the standard link a bottom border. That bottom border is something that I couldn’t get rid of using CSS, except for one weird configuration with floating and IE.
I fixed it by making the following change:
a {text-decoration: none;color: #0000FF;}
a:hover {color: #800000;border-bottom: 1px dotted #800000; text-decoration:none;}
Links are now underlined as normal until they are hovered upon, at which time the underline drops and they are given a bottom border.
However, it’s still not perfect. Linked images still have a border when they are hovered (the dotted one declared above for hovered links). That border stays regardless of whether i declare border:0 or border:none (border:none works just fine, btw), and whether or not either one of those is declared important.
I’m certain it’s not Textpattern specific now, but still irritating. Any ideas?
Last edited by jstur8jv (2006-12-24 04:26:13)
Offline
Re: How do I completely remove the border around linked images?
jstur8jv, technically those images don’t have border-bottoms on them only the containing links have border-bottom. This is why you’ve been unable to get rid of it.
You need to either use a different selector and change the way those links work, or remove that border-bottom from the a {} ruleset.
“a img” is only affecting the border on the image and because the border is technically on the link and not the image, it does nothing.
Last edited by Walker (2006-12-23 22:13:41)
Offline
#6 2006-12-24 04:25:55
- jstur8jv
- Member
- Registered: 2006-12-23
- Posts: 23
Re: How do I completely remove the border around linked images?
Well that’s a silly way to run a web standard.
Thanks for the info.
Offline
Re: How do I completely remove the border around linked images?
Walker wrote:
a img {
border: 0;
}
you know i was beating my head against the wall about this for quite a few days now and for any fellow css newbies out there: never underestimate the order in which you put things. i tried so many combos of class selectors and attributes, and the thing that fixed this for me was shifting this snippet just before the other link styles.
Offline
Re: How do I completely remove the border around linked images?
specificity is a real pain in the ass some times. If you haven’t already downloaded firebug to use with Firefox, then you ABSOLUTELY MUST. I don’t know how I designed and coded without it before.
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: How do I completely remove the border around linked images?
ma_smith wrote:
specificity is a real pain in the ass some times. If you haven’t already downloaded firebug to use with Firefox, then you ABSOLUTELY MUST. I don’t know how I designed and coded without it before.
yeah i’ve been using the web developer toolbar but never really heard of firebug. is there a lot of overlap between the two plugins?
Offline
Re: How do I completely remove the border around linked images?
Firebug is an excellent Javascript debugger, though it does have HTML and CSS editing and inspection utilities. Aside from JS debugging, it’s incredibly useful for tackling Gallery2 customizations (worst attempt at standards HTML code, ever – 800 freakin’ class names).
Last edited by jm (2007-03-29 02:45:29)
Offline
Re: How do I completely remove the border around linked images?
setting up my second textpattern site, i had this problem again – found this thread so easily cause i had posted on it… oh the advantages of being an active forum member :)
Offline