0

I'm using an old version of FlexSlider (v1.4, mostly because I haven't had time to test out the new version yet) and for some reason, the text for the controls shows up in Firefox.

The problem

This is the CSS for the arrows:

  .flex-direction-nav li a {
    display: block;
    width: 52px; height: 52px;
    margin: -13px 0 0;
    background: url(../images/bg_direction_nav.png) no-repeat;
    position: absolute; top: 50%;
    cursor: pointer;
    text-indent: -999em;
  }

I've tried changing the text-indent around, but the text does not move as a result. text-align: left doesn't seem to be the issue when I changed it in Firebug. This issue doesn't show up in Chrome.

Why is the text not hiding itself?

Casey Chow
  • 1,794
  • 4
  • 17
  • 29
  • `color:transparent;` will hide the text. – Rob W Apr 07 '12 at 13:12
  • can you show your code/fiddle/screen shot etc that will be very helpful to understand and to solve the issue. – w3uiguru Apr 07 '12 at 18:07
  • @Dinesh The code is generated by FlexSlider v1.4. I've [Pastebin'd](http://pastebin.com/tKyAepLr) the html generated using the plugin. – Casey Chow Apr 09 '12 at 15:16
  • Dear i just saw your pastbin code but if you show me your working code that will be more helpful. can you create fiddle, or upload some where and show me the working example. – w3uiguru Apr 09 '12 at 16:52

1 Answers1

0

I was having the same issue. My issues was the nav links were inheriting the "text-align: right;".

Try resetting your the text-align property:

    .flex-direction-nav li a {
    display: block;
    width: 52px; height: 52px;
    margin: -13px 0 0;
    background: url(../images/bg_direction_nav.png) no-repeat;
    position: absolute; top: 50%;
    cursor: pointer;
    text-indent: -999em;
    text-align:left;
  }

Also, for IE de-bugging, remember that in lower versions text-indent only works if you have the text-transform property set as well... So just adding

text-transform: uppercase;

will help...

rsigg
  • 76
  • 3