IE6 link colors & CSS override (vs. Firefox)

Discussion in 'HTML' started by Woodmon, Oct 21, 2005.

  1. Woodmon

    Woodmon Guest

    The scenario:

    For this example running current IE6.02 Update version SP2 and Firefox
    1.5b2 on XP SP2

    Internet Options > Colors >Unvisited/Visited colors are picked.

    Everything in IE Accessibility dialog is unchecked - e.g. "ignore colors
    specified on web pages" is unchecked.

    In my web page I have different link colors set by CSS. However when my
    web page renders in IE, the color for the border around the images,
    indicating they are links, is not properly overridden by CSS. But at the
    same time the color of text links are overridden correctly in IE.

    Why the difference in IE?

    Note my CSS link color overrides for both text links and image links
    work fine in Firefox.

    On a related note in IE I see a hover color can be enabled by check box,
    and a color picked. So can IE's hover color setting be overridden? And
    if so can different "hover" overrides be applied to different objects on
    the page (via CSS and class). See my HTML below

    Example of my CSS follows:

    <style type="text/css" media="screen">

    BODY { color: white }
    A:link { color: 66CCFF; }
    A:visited { color: CC66FF; }
    A:active { color: CC66FF; }
    A:hover { color: white; background-color: #0099cc; text-decoration:
    #000000;}

    ..override a:link { color: CC66FF; }
    ..override a:visited { color: 66CCFF; }
    ..override a:active { color: 66CCFF; }
    ..override a:hover { color: blue; background-color: #0099cc;
    text-decoration: #000000;}
    </style>

    HTML with image where IE does not apply the CSS link visited color:

    <tr align="middle">
    <td>
    <a href="bigphoto.html" title="Example: photo1" alt="Example: photo1">
    <img src="images/smallphoto.jpg" /></a>

    </td>
    </tr>

    HTML showing override object:

    <td class="override" align="center" bgcolor="006600">
    <font size="1" color="white" face="helvetica, arial">
    <b>
    <a href="/contact.html">Contact Page</a>
    </b>
    </font>
    </td>


    Appreciate any suggestions.
    Woody
    Woodmon, Oct 21, 2005
    #1
    1. Advertising

  2. Woodmon wrote:

    > Why the difference in IE?


    It's borked.

    > Example of my CSS follows:
    >
    > <style type="text/css" media="screen">
    >
    > BODY { color: white }
    > A:link { color: 66CCFF; }
    > A:visited { color: CC66FF; }
    > A:active { color: CC66FF; }
    > A:hover { color: white; background-color: #0099cc; text-decoration:
    > #000000;}
    >
    > .override a:link { color: CC66FF; }
    > .override a:visited { color: 66CCFF; }
    > .override a:active { color: 66CCFF; }
    > .override a:hover { color: blue; background-color: #0099cc;
    > text-decoration: #000000;}
    > </style>


    Try putting them in proper order: link, visited, hover, active

    [Dare I say it? "Las Vegas Has Animals"]

    --
    -bts
    -When motorcycling, never follow a pig truck
    Beauregard T. Shagnasty, Oct 21, 2005
    #2
    1. Advertising

  3. Woodmon

    Woodmon Guest

    "Beauregard T. Shagnasty" <> wrote in
    news:1wpmwhx9ui8yk$.1xf3wvet7mi6a$:

    > Woodmon wrote:
    >
    >> Why the difference in IE?

    >
    > It's borked.
    >
    >> Example of my CSS follows:
    >>

    > Try putting them in proper order: link, visited, hover, active



    Thanks for the hover pointer. The hover was just an example. I am not
    actually presently using the hover in my current CSS code. But the
    question remains, will a CSS hover override IE browser hover setting and
    can more than one CSS hover override color/effect be applied on the same
    webpage.

    Main priority of my post was to find a workaround to make the image link
    color overrides work in IE. Although IE might be borked, is it possible?
    Thanks.

    Woodmon
    Woodmon, Oct 21, 2005
    #3
  4. Beauregard T. Shagnasty wrote:

    > Woodmon wrote:
    >
    >
    >>Why the difference in IE?

    >
    >
    > It's borked.
    >
    >
    >>Example of my CSS follows:
    >>
    >><style type="text/css" media="screen">
    >>
    >>BODY { color: white }
    >>A:link { color: 66CCFF; }
    >>A:visited { color: CC66FF; }
    >>A:active { color: CC66FF; }
    >>A:hover { color: white; background-color: #0099cc; text-decoration:
    >>#000000;}
    >>
    >>.override a:link { color: CC66FF; }


    Try formatting color values correctly
    ..override a:link { color: #CC66FF; }

    >>.override a:visited { color: 66CCFF; }
    >>.override a:active { color: 66CCFF; }
    >>.override a:hover { color: blue; background-color: #0099cc;
    >>text-decoration: #000000;}
    >></style>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 21, 2005
    #4
  5. Woodmon wrote:

    > "Beauregard T. Shagnasty" <> wrote in
    > news:1wpmwhx9ui8yk$.1xf3wvet7mi6a$:
    >
    >> Woodmon wrote:
    >>
    >>> Why the difference in IE?

    >>
    >> It's borked.
    >>
    >>> Example of my CSS follows:
    >>>

    >> Try putting them in proper order: link, visited, hover, active

    >
    > Thanks for the hover pointer. The hover was just an example. I am not
    > actually presently using the hover in my current CSS code.


    Then why did you post it? This is why we like to see URLs to real pages
    with the problem.

    --
    -bts
    -When motorcycling, never follow a pig truck
    Beauregard T. Shagnasty, Oct 21, 2005
    #5
  6. Jonathan N. Little wrote:

    > Try formatting color values correctly
    > .override a:link { color: #CC66FF; }


    <lol!> I was paying too close attention to the order that I missed
    that. Another reason for posting URLs.

    --
    -bts
    -When motorcycling, never follow a pig truck
    Beauregard T. Shagnasty, Oct 21, 2005
    #6
  7. Woodmon

    Woodmon Guest

    "Beauregard T. Shagnasty" <> wrote in
    news:7154enmyjm7v.1s63x1iwp5em0$:

    > Jonathan N. Little wrote:
    >
    >> Try formatting color values correctly
    >> .override a:link { color: #CC66FF; }

    >
    > <lol!> I was paying too close attention to the order that I missed
    > that. Another reason for posting URLs.
    >


    Again sorry for multi-posting. I was conused versus cross-posting. now I
    understand.

    I cannot send you a URL as the site is not on a publicly accessible
    server.

    I removed the pound (#) signs as I read somewhere they were deprecated
    (or not needed) in stylesheet color info. Possible I was confused.

    And when I stated I removed the "hover" entry, it was not overriding the
    color as I expected, so I removed it from the CSS thinking it may also be
    contributing to my other problem (the orginal main topic of my post...
    which is still an issue). But I found it did not make a difference. I do
    want to add it back so, that is why I was asking if one can have multiple
    hover overrides..

    I appreciate your assist. A gentle nudge in the right direction for my
    multi-posting mistake and positng in the incorrect forum is warranted (I
    posted my question to CIAWS, which I thought was appropriate since it
    directly related to my CSS code).

    So are you folks always so aggressive in your responses? You will scare
    off many with such tactics and do your business(es) listed in your sig a
    dis-service.

    Woodmon
    Woodmon, Oct 21, 2005
    #7
  8. Woodmon

    Toby Inkster Guest

    Woodmon wrote:

    > I removed the pound (#) signs as I read somewhere they were deprecated
    > (or not needed) in stylesheet color info. Possible I was confused.


    Certainly confused. There are five ways of specifying colours in CSS. Two
    of them require a hash sign, the other three must never have a hash sign.

    color: #F00; /* 3-digit hex */
    color: #FF0000; /* 6-digit hex */
    color: red; /* colour keywords */
    color: rgb(255,0,0) /* RGB function (decimal) */
    color: rgb(100%,0,0) /* RGB function (percentage) */

    (There are also the "system colours", but these just expand the set of
    colour keywords.)

    > So are you folks always so aggressive in your responses? You will scare
    > off many with such tactics


    Perhaps that's the idea: maybe we don't want those who are easily scared
    sticking around.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 21, 2005
    #8
  9. On Fri, 21 Oct 2005, Beauregard T. Shagnasty quoted:

    > Woodmon wrote:
    >
    > > A:hover { color: white; background-color: #0099cc; text-decoration:
    > > #000000;}


    This would also do the hover effect on <a name="..."> , which is
    probably not what's wanted. I'd suggest using a:link:hover , to avoid
    that happening.

    > Try putting them in proper order: link, visited, hover, active


    That too.
    Alan J. Flavell, Oct 21, 2005
    #9
  10. Woodmon

    Woodmon Guest

    Toby Inkster <> wrote in
    news:5n.co.uk:


    > Certainly confused. There are five ways of specifying colours in CSS.
    > Two of them require a hash sign, the other three must never have a
    > hash sign.
    >
    > color: #F00; /* 3-digit hex */
    > color: #FF0000; /* 6-digit hex */
    > color: red; /* colour keywords */
    > color: rgb(255,0,0) /* RGB function (decimal) */
    > color: rgb(100%,0,0) /* RGB function (percentage) */
    >
    > (There are also the "system colours", but these just expand the set of
    > colour keywords.)
    >
    >> So are you folks always so aggressive in your responses? You will
    >> scare off many with such tactics

    >
    > Perhaps that's the idea: maybe we don't want those who are easily
    > scared sticking around.
    >



    :)

    Glad I didn't scare you off Tony ;-).

    Thanks much. Inserting the hash mark worked. And reordering the
    hover entry also worked.

    Now I recall covering this stuff in the 90's when I first
    learned HTML/CSS. Obviously I need to brush up at w3.org.

    Now I just need to find a solution to my original question. Which was...

    The link border color around images in IE are not
    properly overridden by CSS. But the color of text
    links in IE are overridden correctly. Any worka
    arounds? CSS link color overrides work fine in
    Firefox (for both text links and image links).
    ..

    Woodmon
    Woodmon, Oct 21, 2005
    #10
  11. Woodmon

    Neredbojias Guest

    With neither quill nor qualm, Woodmon <mr.mediamonATgmail.com> quothed:

    > So are you folks always so aggressive in your responses? You will scare
    > off many with such tactics and do your business(es) listed in your sig a
    > dis-service.


    Ah, that's just to prevent the group from being taken over by whiny
    women or winey men.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 21, 2005
    #11
  12. Woodmon

    Andy Dingley Guest

    On Fri, 21 Oct 2005 08:10:10 +0100, Toby Inkster
    <> wrote:

    >(There are also the "system colours", but these just expand the set of
    >colour keywords.)


    Well not really - they are coded into CSS like that, but their purpose
    is that they provide an extra layer of indirection. Using the system
    colours I can make a form background match a system dialog, even if the
    user's desktop colours have their dialog boxes in pink with green
    buttons.
    Andy Dingley, Oct 21, 2005
    #12
  13. Woodmon

    Andy Dingley Guest

    On Fri, 21 Oct 2005 10:04:54 +0100, "Alan J. Flavell"
    <> wrote:

    >This would also do the hover effect on <a name="..."> , which is
    >probably not what's wanted. I'd suggest using a:link:hover , to avoid
    >that happening.


    :link and :visited are disjoint though so you'd have to use a selector of

    a:link:hover ,
    a:visited:hover { ... }


    --
    Cats have nine lives, which is why they rarely post to Usenet.
    Andy Dingley, Oct 21, 2005
    #13
  14. Woodmon

    Woodmon Guest

    Andy Dingley <> wrote in
    news::

    > On Fri, 21 Oct 2005 10:04:54 +0100, "Alan J. Flavell"
    > <> wrote:
    >
    >>This would also do the hover effect on <a name="..."> , which is
    >>probably not what's wanted. I'd suggest using a:link:hover , to avoid
    >>that happening.

    >
    >:link and :visited are disjoint though so you'd have to use a selector
    >:eek:f
    >
    > a:link:hover ,
    > a:visited:hover { ... }
    >



    Cool. So is the following "order" correct?

    a:link { color: #66CCFF; }
    a:link:hover { color: #CC66FF; background-color: #0099cc;
    text-decoration: #000000;}
    a:visited { color: #CC66FF; }
    a:visited:hover { color: #CC66FF; background-color: #0099cc;
    text-decoration: #000000;}
    a:active { color: #CC66FF; }
    Woodmon, Oct 21, 2005
    #14
  15. Jonathan N. Little, Oct 21, 2005
    #15
  16. Woodmon

    kchayka Guest

    Woodmon wrote:

    > Toby Inkster <> wrote in
    > news:5n.co.uk:
    >
    >> maybe we don't want those who are easily scared sticking around.

    >
    > Glad I didn't scare you off Tony ;-).


    I'll make a guess you're new to usenet, not just this newsgroup, so
    here's some friendly advice:

    If you are going to name names, please be more conscious of spelling
    (and punctuation). One way to get on somebody's bad side is to misspell
    their name.

    *Toby* should be the one to nail you on this. ;)

    > The link border color around images in IE are not
    > properly overridden by CSS.


    IE's CSS is broken in many regards, this is a very minor case.
    Personally, I wouldn't bother with something this trivial, but if it is
    all that important to you, you might try something like

    a:link img {border-color: #6cf;}
    a:visited img ...

    No guarantees, though.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Oct 21, 2005
    #16
  17. On Fri, 21 Oct 2005, Andy Dingley wrote:

    > <> wrote:
    >
    > >This would also do the hover effect on <a name="..."> , which is
    > >probably not what's wanted. I'd suggest using a:link:hover , to avoid
    > >that happening.

    >
    > :link and :visited are disjoint though so you'd have to use a selector of
    >
    > a:link:hover ,
    > a:visited:hover { ... }


    If you wanted the hover effect on visited links, yes. Last occasion
    that I was involved in this, we decided that we didn't - their
    distinctive colour was considered enough - but that choice isn't
    binding on anything else, obviously.

    cheers.
    Alan J. Flavell, Oct 21, 2005
    #17
  18. Woodmon

    Andy Dingley Guest

    On Fri, 21 Oct 2005 23:47:24 +0100, "Alan J. Flavell"
    <> wrote:

    >If you wanted the hover effect on visited links, yes.


    Now why on earth wouldn't you ? The idea of different behaviours based
    on past history of that link strikes me as very odd design. Mind you, I
    never understood why :visited wasn't just a subset of :link in the first
    place.


    --
    Cats have nine lives, which is why they rarely post to Usenet.
    Andy Dingley, Oct 22, 2005
    #18
  19. On Sat, 22 Oct 2005, Andy Dingley wrote:

    > On Fri, 21 Oct 2005 23:47:24 +0100, "Alan J. Flavell"
    > <> wrote:
    >
    > >If you wanted the hover effect on visited links, yes.

    >
    > Now why on earth wouldn't you ?


    I refer the hon. Gent. to my previous answer:

    |Last occasion that I was involved in this, we decided that we didn't -
    |their distinctive colour was considered enough - but that choice
    |isn't binding on anything else, obviously.

    Speaking for myself, I consider the :hover to be a rather fatuous
    decoration, which all too often tempts deezyners to Mystery Meat
    Navigation, in which the links are effectively indistinguishable from
    normal text unless and until one hovers over them. But that hadn't
    quite happened here, and the "customer" wanted the hover effect: I
    didn't bring my personal opinion on :hover into the discussions at
    all. I did, however, point out that her <a name=...> anchors were
    responding to her :hover style, and the reviewing team agreed that
    wasn't such a good idea. Which brings us back to the point.

    At the start of reviewing her design, there was no distinction between
    nonvisited and visited links.

    After fixing the anchors problem by using a:link:hover, the only
    distinction between nonvisited and visited links was that the visited
    links didn't respond to :hover. I managed to convince the reviewing
    team that a change in colour was desirable in addition, though.

    None of this is binding on anyone else's design, so I'm not going to
    get into an argument about it. I'm just trying to summarise how this
    came to pass in one particular case.

    OK?
    Alan J. Flavell, Oct 22, 2005
    #19
  20. Woodmon

    Neredbojias Guest

    With neither quill nor qualm, Andy Dingley quothed:

    > On Fri, 21 Oct 2005 23:47:24 +0100, "Alan J. Flavell"
    > <> wrote:
    >
    > >If you wanted the hover effect on visited links, yes.

    >
    > Now why on earth wouldn't you ? The idea of different behaviours based
    > on past history of that link strikes me as very odd design. Mind you, I
    > never understood why :visited wasn't just a subset of :link in the first
    > place.


    Perhaps some people would confuse it with "missing".

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Oct 22, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ivor O'Connor
    Replies:
    4
    Views:
    828
    Isofarro
    Nov 25, 2003
  2. johnsouth

    CSS Menu tabs IE6 v Firefox

    johnsouth, Dec 11, 2006, in forum: HTML
    Replies:
    1
    Views:
    542
    Andy Dingley
    Dec 11, 2006
  3. AAaron123

    TreeNode colors come from anchor colors

    AAaron123, Aug 7, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    528
    darrel
    Aug 7, 2008
  4. ZelluX
    Replies:
    3
    Views:
    1,859
    Peter Otten
    Dec 1, 2008
  5. The Natural Philosopher

    Possibly OT. IE6 and background colors..

    The Natural Philosopher, Oct 26, 2007, in forum: Javascript
    Replies:
    31
    Views:
    358
    Thomas 'PointedEars' Lahn
    Oct 28, 2007
Loading...

Share This Page