Browser Differences with AnythingSlider JQuery?

[JimLemoine]

Greetings… a very satisfied user of the AnythingSlider JQuery. Thanks so much for making it available and helping out with it.

I finally got it tweaked to my liking on my old desktop and working great on my blog (blog.nevertown.com). However, when I fire it up on my laptop with Firefox, the graphics are… off. Like they’re over further to the side than they should be.

Any experts out there willing and able to help a guy who’s down on his luck? Again, the blog can be found at blog.nevertown.com.

Thanks!

JL

[coffeendonut]

UMMmmm… i had time and fixed for you change the slider css with this

/*

anythingSlider v1.2



By Chris Coyier: https://css-tricks.com

with major improvements by Doug Neiner: http://pixelgraphics.us/

based on work by Remy Sharp: http://jqueryfordesigners.com/

*/

.anythingSlider {

width: 600px;

height: 243px;

position: relative;

margin: 0 auto 15px;

}

.anythingSlider .wrapper {

width: 520px;

overflow: auto;

height: 224px;

margin: 0 20px;

position: absolute;

top: 0;

left: 0;

}

/* Width below is max for Opera */

.anythingSlider .wrapper ul {

width: 9999px;

list-style: none;

position: absolute;

top: 0;

left: 0;

background: #eee;

border-top: 3px solid #660099;

border-bottom: 3px solid #660099;

margin: 0;

}

.anythingSlider .wrapper ul li {

display: block;

float: left;

padding: 0;

height: 200px;

width: 520px;

margin: 0;

position:relative;

left:-40px;

}

img{border:none}

.anythingSlider .arrow {

display: block;

height: 200px;

width: 67px;

background: url("http://www.nevertown.com/images/blog/arrows.png") no-repeat 0 0;

text-indent: -9999px;

position: absolute;

top: -200px;

cursor: pointer;

}

.anythingSlider .forward {

background-position: 0 0;

right: -90px;

}

.anythingSlider .back {

background-position: -67px 0;

left: 50px;

}

.anythingSlider .forward:hover {

background-position: 0 -200px;

}

.anythingSlider .back:hover {

background-position: -67px -200px;

}

.thumbNav {

position: relative;

right: 90px;

top: 206px;

text-align: center;

}

.thumbNav li {

display: inline;

}

.thumbNav a {

color: black;

font: 11px/18px Trebuchet MS, Helvetica, Serif;

display: inline-block;

padding: 2px 8px;

height: 18px;

margin: 0 5px 0 0;

background: #660099 url("http://www.nevertown.com/images/blog/cellshade.png") repeat-x;

text-align: center;

-moz-border-radius-bottomleft: 5px;

-moz-border-radius-bottomright: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

}

.thumbNav a:hover {

background-image: none;

}

.thumbNav a.cur {

background: #006600;

}

.start-stop {

z-index: 10;

background: green;

background-image: url("http://www.nevertown.com/images/blog/cellshade.png");

background-repeat: repeat-x;

color: white;

padding: 2px 5px;

width: 40px;

text-align: center;

position: absolute;

right: 80px;

top: 206px;

-moz-border-radius-bottomleft: 5px;

-moz-border-radius-bottomright: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

}

.start-stop.playing {

background-color: red;

}

.start-stop:hover {

background-image: none;

}

/* Prevents */

.anythingSlider .wrapper ul ul {

position: static;

margin: 0;

background: none;

overflow: visible;

width: auto;

border: 0;

}

.anythingSlider .wrapper ul ul li {

float: none;

height: auto;

width: auto;

background: none;

}

[JimLemoine]

Thanks for the effort… but that didn’t quite work. The buttons are still chopped off at the sides on Firefox, and now the pictures are misaligned on Internet Explorer and right on Firefox, where before they were right on IE but misaligned on Firefox. I’ve got your build up now at blog.nevertown.com.

Is there any way to make it work right for both browsers?

[JimLemoine]

I’m not sure which wrapper width I’d need to adjust. If you have time, I’d appreciate your help.

[JimLemoine]

Thank you, virtual – that did fix the clipping issues in Firefox, but it didn’t impact the viewing problems in IE. Specifically, the graphics within the slider are about 40 pixels to the left of where they should be, when viewed with IE 7. Does anybody know a fix for this issue?

[JimLemoine]

Hate to sound needy… but no idea how to do that. Anybody feeling helpful and wanting a challenge? Anybody? Anybody? Bueller?

[JimLemoine]

Tried adding the conditional comment for IE7 as you suggested, but it didn’t seem to have any effect.

Here’s the slider CSS I’m currently using, if it helps:

/*

anythingSlider v1.2



By Chris Coyier: https://css-tricks.com

with major improvements by Doug Neiner: http://pixelgraphics.us/

/*    anythingSlider v1.2        By Chris Coyier: https://css-tricks.com    with major improvements by Doug Neiner: http://pixelgraphics.us/    based on work by Remy Sharp: http://jqueryfordesigners.com/*/.anythingSlider {    width: 600px;    height: 243px;    position: relative;    margin: 0 0 15px 15px;}.anythingSlider .wrapper {    width: 520px;    overflow: auto;    height: 224px;    margin: 0 20px;    position: absolute;    top: 0;    left: 0;}/* Width below is max for Opera */.anythingSlider .wrapper ul {    width: 9999px;    list-style: none;    position: absolute;    top: 0;    left: 0;    background: #eee;    border-top: 3px solid #660099;    border-bottom: 3px solid #660099;    margin: 0;}.anythingSlider .wrapper ul li {    display: block;    float: left;    padding: 0;    height: 200px;    width: 520px;    margin: 0;      position:relative;     left:-40px;} img{border:none}.anythingSlider .arrow {    display: block;    height: 200px;    width: 67px;    background: url("http://www.nevertown.com/images/blog/arrows.png") no-repeat 0 0;    text-indent: -9999px;    position: absolute;    top: -200px;    cursor: pointer;}.anythingSlider .forward {    background-position: 0 0;    right: -90px;}.anythingSlider .back {    background-position: -67px 0;    left: 50px;}.anythingSlider .forward:hover {    background-position: 0 -200px;}.anythingSlider .back:hover {    background-position: -67px -200px;}.thumbNav {    position: relative;    right: 90px;    top: 206px;    text-align: center;}.thumbNav li {    display: inline;}.thumbNav a {    color: black;    font: 11px/18px Trebuchet MS, Helvetica, Serif;    display: inline-block;    padding: 2px 8px;    height: 18px;    margin: 0 5px 0 0;    background: #660099 url("http://www.nevertown.com/images/blog/cellshade.png") repeat-x;    text-align: center;    -moz-border-radius-bottomleft: 5px;    -moz-border-radius-bottomright: 5px;    -webkit-border-bottom-right-radius: 5px;    -webkit-border-bottom-left-radius: 5px;}.thumbNav a:hover {    background-image: none;}.thumbNav a.cur {    background: #006600;}.start-stop {    z-index: 10;    background: green;    background-image: url("http://www.nevertown.com/images/blog/cellshade.png");    background-repeat: repeat-x;    color: white;    padding: 2px 5px;    width: 40px;    text-align: center;    position: absolute;    right: 80px;    top: 206px;    -moz-border-radius-bottomleft: 5px;    -moz-border-radius-bottomright: 5px;    -webkit-border-bottom-right-radius: 5px;    -webkit-border-bottom-left-radius: 5px;}.start-stop.playing {    background-color: red;}.start-stop:hover {    background-image: none;}/* Prevents */.anythingSlider .wrapper ul ul {    position: static;    margin: 0;    background: none;    overflow: visible;    width: auto;    border: 0;}.anythingSlider .wrapper ul ul li {    float: none;    height: auto;    width: auto;    background: none;}

[JimLemoine]

I have, and it didn’t seem to have the desired effect. I’ve put the code in the template, and it didn’t seem to do anything.

[JimLemoine]

Any chance anybody can help out with this? Very frustrating trying to fix it, but them I’m not very good at all with CSS….

[JimLemoine]

Thanks again for your help. Changed the meta content line to get rid of the offending apostrophe, and moved the IE7 line to what I believe to be the proper place. Didn’t seem to have any effect in IE 7. Did I do it right?

[JimLemoine]

That worked perfectly. So simple, so elegant. Thanks very much!

[Author]

Posts