IE is refusing my styled link, visited, hover, & active CSS settings

But it works in several other browsers, advice please.

[Fribble]

Hello everyone,

I am having some issues getting IE to comply with my design wishes here and I'm not sure if it is a bug in IE or a bug in ME. Please have a look:

Regardless of the class the image is assigned to, IE is ignoring my a:'s... It just displays a blue border although text links get styled just fine.

Here is the A: section of my stylesheet:

a:link { color: blue; }
a:visited {color: blue; }
a:hover {color: red; }
a:active { color: black; }

.footer A:link {color: rgb(252,73,2); }
.footer A:visited {color: rgb(252,73,2); }
.footer A:hover {color: rgb(253,227,163); }
.footer A:active {color: black; }

.button A:link {color: rgb(255,255,255); }
.button A:visited {color: rgb(255,255,255); }
.button A:hover {color: red; }
.button A:active {color: black; }

.link A:link {color: rgb(255,255,255); }
.link A:visited {color: rgb(255,255,255); }
.link A:hover {color: red; }
.link A:active {color: black; }

and here is a snippet from one of my pages:

<P class="H2 link"><A CLASS="floatright" href="path/to/image.jpg" target="_blank"><IMG SRC="path/to/biggerimage.jpg" ALT="" WIDTH="400" HEIGHT="200" BORDER="2px"></A>text</P>

This happens to all the images on the page regardless of what other elements they appear in. I can post more info too, I just didn't want to bloat the post.

Thanks,

Mark

[Robin_reala]

The colour around the image is a border, not a color. For each of your link rules you'll need to add in an equivalent "border: 1px solid #colour;" rule.

[collymellon]

Add this to your stylesheet:

IMG{border:none;}

Now by default any A links \ images will not display a border unless specified in a class assigned to the link\image.

[koen]

Why are you mixing a stylesheet with inline style elements?

[Fribble]

Sweet, thanks Robin_reala and collymellon - I've changed the "color:" rules to "border: 1px solid #colour;", added IMG{border:none;} and removed all inline border='s from my html. Now the borders are getting styled with the right colors and I've eliminated one of my 'A' classes:

a:link { color: blue;}
a:visited {color: blue; }
a:hover {color: red; }
a:active { color: black; }

a.button:link { border: 1px solid rgb(255,255,255); }
a.button:visited {border: 1px solid rgb(255,255,255); }
a.button:hover {border: 1px solid red; }
a.button:active {border: 1px solid black; }

.footer A:link {color: rgb(252,73,2); }
.footer A:visited {color: rgb(252,73,2); }
.footer A:hover {color: rgb(253,227,163); }
.footer A:active {color: black; }

But now Firefox is displaying the border about 5px lower than the image for any <img> elements inside of <a> elements that are not floated on the page. The floated linked images are working fine.

[Robin_reala]

img { display: block; }

Your non-floated images are display:inline and therefore sit on the baseline for the line which has space below it for the descenders of text.

[Fribble]

I added 'img { display:block; }' to my stylesheet and it didn't fix it (all the images on the page prompty took up their own line, it may have been tweakable but I couldn't figure it out at the time) - so I tried 'a { display:block; }' to try and bring the border up to the image. That worked, but I couldn't get the A element to accept a width and it still jacked with my text links so that's out..

I now understand that it is a line-height issue between the A and the IMG elements (Thanks Robin_Reala) but I sure am having a heck of a time figuring out how to fix it, I definately will study up on block/inline elements.

If anyone can point me to a good explanation of these things I would appreciate it - I've been using the W3C Schools site up until now. The following change to my A: statements worked, but I'm not sure why.

a.button:link img { border: 1px solid rgb(255,255,255); }
a.button:visited img {border: 1px solid rgb(255,255,255); }
a.button:hover img {border: 1px solid red; }
a.button:active img {border: 1px solid black; }