Solved

Can't seem to get rid of the text decoration around the thumbnails

Posted on 2012-03-15
4
216 Views
Last Modified: 2013-11-19
Hello:

I can't seem to get rid of the text-decoration around the thumbnails:

http://inetwebdesign.com/jQueryTools/banners/thumbnail_pager_method8.html

 I have tried several methods via css but to no avail.

Thanks in advance as always for your help.

Regards,
seeker
0
Comment
Question by:seeker7806
  • 3
4 Comments
 

Author Comment

by:seeker7806
ID: 37726152
Forgot. The problem exists only on IE. Everything is good on Firefox and Chrome
0
 
LVL 10

Accepted Solution

by:
c_a_n_o_n earned 500 total points
ID: 37726201
0
 

Author Comment

by:seeker7806
ID: 37726797
Hi c_a_n_o_n:

Thanks for your response.

I changed and added z-indexes (z-indices?) but this did not change the situation:

http://inetwebdesign.com/jQueryTools/banners/thumbnail_pager_method8.html

Here is the css:
/*pager*/


.bx-pager {
	background-image:url('gradient-background.png');
	position:absolute;
	margin-top:-85px;
	margin-top:-87px\9;/*IE8 and older*/
	margin-left:0px;
	margin-left:15px\9;/*IE8 and older*/	
	height:40px;
	width:530px;
	z-index:100;
	
}



.bx-pager a img{
	height:25px;
	width:40px;
	text-decoration:none;
	display:inline-block;
	outline:none;
	margin:0;
	padding:0;
   
		
}


.bx-pager a {
	height:25px;
	width:40px;
	text-decoration:none;
	display:inline-block;
	z-index:112;
	
}

.bx-pager .pager-active,
.bx-pager a:hover {
	height:25px;
	width:40px;
	text-decoration:none;
	display:inline-block;
	padding:0;
	margin:0;
	border:2px solid white;
	z-index:113;
	
}

Open in new window


I am thinking this has to do with the javascript:

  var f = "";
            if (b.buildPager) {
                for (var i = 0; i < e; i++) {
                    f += b.buildPager(i, g.eq(i * b.moveSlideQty))
                }
            } else if (c == "full") {
                for (var i = 1; i <= e; i++) {
                    f += '<a href="" class="pager-link pager-' + i + '">' + i + "</a>"
                }
            } else if (c == "short") {
                f = '<span class="bx-pager-current">' + (b.startingSlide + 1) + "</span> " + b.pagerShortSeparator + ' <span class="bx-pager-total">' + g.length + "</span>"
            }
            if (b.pagerSelector) {
                a(b.pagerSelector).append(f);
                n = a(b.pagerSelector)
            } else {
                var j = a('<div class="bx-pager"></div>');
                j.append(f);
                if (b.pagerLocation == "top") {
                    h.prepend(j)
                } else if (b.pagerLocation == "bottom") {
                    h.append(j)
                }
                n = a(".bx-pager", h)
            }
            n.children().click(function () {
                if (b.pagerType == "full") {
                    var a = n.children().index(this);
                    if (b.moveSlideQty > 1) {
                        a *= b.moveSlideQty
                    }
                    d.goToSlide(a)
                }
                return false
            })
        }
        function R(c, e, f, g) {
            var i = a('<a href="" class="bx-next"></a>');
            var j = a('<a href="" class="bx-prev"></a>');
            if (c == "text") {
                i.html(e)
            } else {
                i.html('<img src="' + e + '" />')
            }
            if (f == "text") {
                j.html(g)
            } else {
                j.html('<img src="' + g + '" />')
            }
            if (b.prevSelector) {
                a(b.prevSelector).append(j)
            } else {
                h.append(j)
            }
            if (b.nextSelector) {
                a(b.nextSelector).append(i)
            } else {
                h.append(i)
            }
            i.click(function () {
                d.goToNextSlide();
                return false
            });
            j.click(function () {
                d.goToPreviousSlide();
                return false
            })
        }
        function Q(c) {
            if (b.pagerType == "full" && b.pager) {
                a("a", n).removeClass(b.pagerActiveClass);
                a("a", n).eq(c).addClass(b.pagerActiveClass)
            } else if (b.pagerType == "short" && b.pager) {
                a(".bx-pager-current", n).html(x + 1)
            }
        }
        function P() {
            g.not(":eq(" + x + ")").fadeTo(b.speed, 0).css("z-Index", 98);
            g.eq(x).css("zIndex", 99).fadeTo(b.speed, 1, function () {
                E = false;
                if (jQuery.browser.msie) {
                    g.eq(x).get(0).style.removeAttribute("filter")
                }
                b.onAfterSlide(x, g.length, g.eq(x))
            })
        }
        function O() {
            e.hover(function () {
                if (t) {
                    d.stopTicker(false)
                }
            }, function () {
                if (t) {
                    d.startTicker(false)
                }
            })
        }
        function N() {
            h.find(".bx-window").hover(function () {
                if (t) {
                    d.stopShow(false)
                }
            }, function () {
                if (t) {
                    d.startShow(false)
                }
            })
        }

Open in new window


but I am not certain.

Regards,
seeker
0
 

Author Comment

by:seeker7806
ID: 37727076
Hello:

I found the solutions here:

http://www.htmlforums.com/css/t-resolved-text-decoration-none-not-working-in-ie-144809.html

This worked:
.bx-pager a img{
	height:25px;
	width:40px;
	text-decoration:none;
	display:inline-block;
	outline:none;
	margin:0;
	padding:0;
	border:none;
   
		
}  

border:none;

Open in new window


Regards,
seeker
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Issue 3 78
Reinstall Putty Windows 7 5 44
Why is this panel heading creating extra space 2 31
Change color of modular 8 20
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now