/    Sign up×
Community /Pin to ProfileBookmark

Image border in Internet Explorer

Copy linkTweet thisAlerts:
Nov 24.2007

I have a bunch of thumbnail pictures which link using the ‘Lightbox 2’ effect. Everything is in working order.

The images have white border around them and when you rollover the border turns pink as i’ve defined in the CSS document. This works in both Firefox and Safari but in Internet Explorer the images are all appearing with a blue border around them.

Can someone tell me is there an alternative CSS tag for IE or how i can rectify this?

Thanks all.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Nov 24.2007 — Code or link please.
Copy linkTweet thisAlerts:
@adam_fakeauthorNov 24.2007 — below is the code from the CSS doc:

a:link {

text-decoration: none;

color: #FFFFFF;

}

a:hover {

text-decoration: none;

color: #FF29A3;

}

a:visited {

text-decoration: none;

color: #FFFFFF;

}

a:active {

text-decoration: none;

color: #FFFFFF;

}[/QUOTE]
Copy linkTweet thisAlerts:
@aj_nscNov 24.2007 — do you have any rules for your img tags?

if not, then you have to explicitly state them like

<i>
</i> img { border: 1px solid #fff; }
img:hover { border-color: #FF29A3; }


that will take care of your blue border. the color on the link tags won't take care of it obviously in internet explorer.

I don't think the img:hover will work in IE6 or below. If you want to make that work, go to google and type in csshover.htc. Download the file and follow the directions on how to make it work.
Copy linkTweet thisAlerts:
@adam_fakeauthorNov 24.2007 — Thanks for this - i'll have a go and see what i can do.
Copy linkTweet thisAlerts:
@WebJoelNov 24.2007 — a:link {

text-decoration: none;

color: #FFFFFF;

}

a:hover {

text-decoration: none;

color: #FF29A3;

}

a:visited {

text-decoration: none;

color: #FFFFFF;

}

a:active {

text-decoration: none;

color: #FFFFFF;

}[/QUOTE] And it will help if you invoke these in the correct order of "link, visited, hover, active". The way you have them written now, you could lose some effects.

Think "[B]l[/B]o[B]v[/B]e[B]ha[/B]te".

For 'non pointer-tool' access (like TABS, arrow keys and, for the handicapped), you can add "a:focus"

a:link {...}

a:visited {...}

a:hover {...}

[B]a:focus {...}[/B]

a:active {...}

again, [I]in this order[/I]. You'd want the "a:focus {...}" to carry the same values as "a:hover" (as they are essentially the same thing, except you 'focus' with a hotkey and you 'hover' with a pointer-tool/mouse).

Here, (if you are a STAR WARS fan), you think:

[B]L[/B]ord [B]V[/B]ader's [B]H[/B]andle [B]F[/B]ormerly [B]A[/B]nakin
Copy linkTweet thisAlerts:
@CentauriNov 24.2007 — Assuming the images are within the <a> tags, then you can change the image border with :[CODE]a img { border: 1px solid #fff; }
a:hover img { border-color: #FF29A3; }[/CODE]
×

Success!

Help @adam_fake spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...