We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

CSS style not applied to visited link in Internet Explorer 8

    • 15001
    • 697 Posts
    Jul Reply #1, 11 years, 5 months ago
    Hi,

    I observe this strange behaviour in Internet Explorer 8:
    the following style is correctly applied to non-visited links but is not applied to visited links. Any idea?
    .menu ul li a, .menu ul li a:visited  {
display:block;
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
line-height:17px;
border:none;
color:#fff;
text-shadow:0px 0px 1px #fff;
text-decoration:none;
z-index:100;
}

    The links are like:
    <div class="menu">
<ul>
<li style="background:solid;background-color:#e00;filter:alpha(opacity=65);background: hsla(1, 100%, 50%, 0.65)" ><a href="[~1~]" title="" >First</a></li>
<li style="background:solid;background-color:#ffbf00;filter:alpha(opacity=65);background: hsla(45, 200%, 50%, 0.65)" ><a href="[~2~]" title="" >Second</a></li>
<li style="background:solid;background-color:#00ff40;filter:alpha(opacity=65);background: hsla(135, 200%, 50%, 0.65)" ><a href="[~3~]" title="" >Third</a></li>
</ul>
</div>
    independantly from the fact that the links were visited or not.

    I heard about the fact that :visited is not recognized by modern browsers, including MSIE 8, for security reasons. Then, why isnn't the default style for links simply applied?

    In Firefox, no problem.
    I also double-checked with Firebug, that there is not any other style applied after thus mentioned above, cleared both MODx and browser cache and even restarted Internet Explorer.

    For Internet Explorer, I could not find any better patch than applying the whole style with a style="" inside each anchor, and that's bad coding.
      • 13226
      • 953 Posts
      iusemodx Reply #2, 11 years, 5 months ago
      Someone else will probably say this anyway - IE8 is a rare browser nowadays, so is it realy that important ?

      I dropped support for IE8 and below over a year ago.

      Your inline styles (as you have stated) are "bad coding", at least to that extent.

      IE8 doesn't suport: "hsla" or "text-shadow"

      "filter:alpha" should be (if I remember correctly) "-ms-filter:"

      IE8 is buggy with z-index

      Just out of interest - do you have a universal "a" setting e.g.
      a{color:#FF0000; background-color:#FFFFFF;}
        Download the latest Evo release
        Report an issue about Evo
        Read the Evo documentation
        • 13226
        • 953 Posts
        iusemodx Reply #3, 11 years, 5 months ago
        Just looked at your code again - there is no difference between "a" and "a:visited"

        They both share identical properties, so they will always display the same.

        I just had a play and this works in IE9 - I can't test IE8 as I don't have it:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visited Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.menu ul{display:block; margin:0; padding:0; list-style:none;}
.menu ul li a:link, .menu ul li a:visited{display:block; padding:4px 10px; line-height:17px; border:none; color:#fff; text-decoration:none; z-index:100;}
.menu ul li a:visited{color:#FF0000;}
/* Remove inline styling - IE8 doesn't support "nth" so do it old school */
.menu ul li:first-child{background-color:#e00; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5FF0400,endColorstr=#A5FF0400)"; background:hsla(1,100%,50%,.65);}
.menu ul li:first-child + li{background-color:#ffbf00; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#A5FFBF00,endColorstr=#A5FFBF00)"; background:hsla(45,200%,50%,.65);}
.menu ul li:first-child + li + li{background-color:#00ff40; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#A500FF3F,endColorstr=#A500FF3F)"; background:hsla(135,200%,50%,.65);}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="[~1~]">First</a></li>
    <li><a href="[~2~]">Second</a></li>
    <li><a href="[~3~]">Third</a></li>
  </ul>
</div>
</body>
</html>

        I have added the pseudo element "link" for IE8

        I used XHTML as IE8 doesn't support HTML5 "out of the box"
          Download the latest Evo release
          Report an issue about Evo
          Read the Evo documentation
          • 15001
          • 697 Posts
          Jul Reply #4, 11 years, 5 months ago
          Thanks for your posts, "iusemodx".

          I tried, your code but it did not work any better with Internet Explorer 8.

          In fact, all styles are correctly applied to the <li> element, typically the translucent background colors, with my code too.

          What is not applied to the visited link, once it was visited and for Internet Explorer 8 only, are all styles for the <a> element, like the line-height or the color in this case.

          I have a more generic style for anchors somewhere, upper in the cascading:
          a {color:#444;}

          It's possible that Internet Explorer forgets to do the whole cascading of styles when displaying visited links ; I have not tested.

          I solved the styling bug by adding a <span> sandwich inside the anchor and adding the following style:
          .menu ul li a span {
color:#fff;
}


          Concerning the translucent backgrounds, the code I use is compatible with many browsers. hsla colors are currently not supported by Internet Explorer, but this browser supports the first three styles in this line:
          background:solid;background-color:#e00;filter:alpha(opacity=65);background: hsla(1, 100%, 50%, 0.65)

          In most browsers, the background style is then replaced by the hsla(...), and IE simply ignores it.

          The same for the text-shadow and z-index properties.
          IE simply ignores them, so they aren't a problem.
          text-shadow makes the text easier to read in other browsers like Firefox and Safari, especially for white text, as it smoothes the contours.

          I was not aware of the "+" selector that you use to style the second and third <li> elements. Very nice,thanks.
          In the current project however, I define the colors inline: <li style="{{[+fond_colore+]}}"> with a TV calling a chunk where some predefined colors is stored. This permits to edit the colors from within MODx.

          IE 8 is important as this is the last version of Internet Explorer supported by Windows XP, and yes there are still guys like me using it!
            • 3749
            • 24,544 Posts
            BobRay Reply #5, 11 years, 5 months ago
            One solution is to find something that works in IE8 and use conditional comments to make it apply only to IE8:

            <!--[if IE 8]>
a { 
  font-weight: bold;
  text-decoration: none;
  color: navy;
}

a:visited {
  font-weight: normal;
  color: purple;
}

a:hover {
  text-decoration: underline;
}
<![endif]-->
              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting
              • 13226
              • 953 Posts
              iusemodx Reply #6, 11 years, 5 months ago
              @ Jul

              If I have a little time tomorrow I will take a look again.

              I picked up an old laptop today and it has Win XP installed, but I don't know which IE version is installed, 7 or 8

              BobRay is right, although I would use a more generic conditional, anything below IE9:
              <!--[if lt IE 9]>
STYLES HERE
<![endif]-->

              But, if you are coding using conditionals you need to remember that they are no longer supported in IE10, you need to add an extra meta tag that tells IE10 to emulate the previous version you require e.g. 8 / 9 etc.

              I don't know your level of expertise (so please excuse if you already know this) but a note on your "filter" property - what you are actually doing here is not setting the alpha channel, you are setting the opacity of the element, including all elements contained within it.

              The "alpha channel" and "opacity" are two completely different things.
                Download the latest Evo release
                Report an issue about Evo
                Read the Evo documentation
                • 13226
                • 953 Posts
                iusemodx Reply #7, 11 years, 5 months ago
                @ Jul

                I just tried the code that I posted above (IE8 on the laptop).

                The "a" changes colour as expected - it changes on visited to "#FF0000"

                So, now is my question:

                Which colours need to be changed on visited, as the "a" colour does change to signal it has been visited?

                I completed another test as well - I added a conditional that says on visited change the "a" tag colour to blue - works as well. So I don't see why it doesn't work your end.

                Take a look at the attached image and you can see that in IE8 the text colour has changed from white to red as the links have been visited.
                  Download the latest Evo release
                  Report an issue about Evo
                  Read the Evo documentation
                  • 15001
                  • 697 Posts
                  Jul Reply #8, 11 years, 4 months ago
                  Thanks a lot iusemodx and BobRay.

                  @iusemodx: Thank you mentioning the difference between "alpha chanel" and "opacity"; I was not aware of this difference and will take a closer look.

                  Which colours need to be changed on visited, as the "a" colour does change to signal it has been visited?
                  This is for a menu with white text on colored translucent backgrounds. I want the text to remain white after the page was visited.
                  Concerning Internet on XP, it comes with the version 6, which is completely outdated. But you can upgrade up to the version 8.