Anything Slider – Issues with navigation in IE

[SeanLA]

So, after many, many hours of re-designing this excellent jQuery application, which has probably been my most difficult experience with any jQuery application to date, I tested it in IE 8 and the navigation buttons don’t work.

Basically what happens is that when I hover over any section of my website which is on the same horizontal line as the navigation buttons, it highlights the button at the end and doesn’t let me select any other. I’m most certainly not a bonafide jQuery expert and it’s entirely possible that I’ve broken something along the way with my tinkering.

I would really appreciate any help with this!

http://www.seahavendance.co.uk <-- The site where it is located is here!

[Mottie]

Hi Sean!

Ugh, I can see that it’s a css issue because if I remove the float: left from the nav, they all work correctly. It even acts weird when I remove the float: left and change the display: inline-block. It seems that the last LI is overlapping and I can’t tell why.

I might need to ask some others here (like Mr @ChristopherBurton guru) to look at it because right now I’m kind of useless with this throbbing headache…. I hate you IE!!

[SeanLA]

I had particular difficulty with getting the navigation to align to the center properly, it seemed to be held in place originally by a number of conflicting positioning/aligning values which I tried to remove as many as possible so it could be aligned by as few lines of code as possible, preferably in the same document..!

If I remove this line of code from anythingslider.css:

div.anythingSlider .anythingControls ul { margin: 0; padding: 3px 0px 0 0; }

It positions the navigation a lot further down and slightly to the right. I decided to keep it in and look at it another time but it would be great if I could get some advice on that too.

I really hate IE too!

[Mottie]

Thanks Senff! I’ll have to check that. I do know in the anythingslider-ie.css stylesheet for IE7 and older, I had to target the span inside of the link and set that with the text-indent: -9999px otherwise the entire link as well as the text would be shifted. I guess IE8 still has issues with it. Ok, I need to get away from the computer… but I’ll check it out later!

[SeanLA]

Aha, it works! Thank you so much for helping me out, I really appreciate it! :)

[Mottie]

Sweet thanks @Senff! I’ll update the repository :)

[Author]

Posts