Navigation tab spacing uneven when navigationSize is used

[paul-htspos]

I'm trying to add navigationSize and navigationFormatter to my slider, but when I add NavigationSize, the tab spacing is uneven between the << and >> tabs. There's a gap between the << tab and the first slide tab, and the >> tab is overlapping the last slide tab. I haven't been able to figure out how it's done in slider2 on the demo, which spaces evenly. Where can I adjust that?

[Mottie]

Hi @paul-htspos!

Does the content inside the tabs change somehow? I wonder if this is related to #472

[paul-htspos]

No, it just shifts too far right. for example, if I put navigationSize: 5, the 5 tabs are spaced evenly from each other, but shifted too far to the right, so it runs in to the >> tab. I'm not using thumbnails, just or numbers or text.

[Mottie]

Hmm, maybe try reducing the 25 value that is added; see line 346

base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 25 );

[paul-htspos]

Sure enough, reducing 25 to 0 evened it right up. According to the notes that will break old IE, but I'm not sure I care about that. The tabs shifted left as I reduced that number incrementally. Thank you.

[paul-htspos]

After further review, it turned out that fixed it only on my Firefox v22.0 on my fedora 17 box where I'm developing the website. It reacts differently on Chrome, and also on my Windows box on a newer Firefox, on Chrome, and on IE. They all seem to position the tabs a little differently. On all the windows browsers I tried, it seemed better to leave it at 25. You can see the slider at http://www.boltfdi.com/installations.html

[Mottie]

It's looks like the #gallery has a text-align:center that is causing the problem, so try this css:

.anythingSlider-default .anythingControls ul {
    text-align: left;
}

[paul-htspos]

I tried that. It seemed to help. Worked better when I added the text-align: left to the already existing line under

/* Navigation Links */
.anythingSlider-default .anythingControls ul {
    margin: 0;
    padding: 0;
    float: left;
    text-align: left;
}

Also, on line 326 I changed the 25 to 5. It seemed to get the best compromise, preventing IE from wrapping tab 50 to the next line, and not badly affecting Firefox. Now IE and Firefox look pretty good.

On Chrome v39 on Windows, the further I go to the right in the tabs, the more it shifts the tabs too far to the left, hiding part or all of the active tab behind the << tab and ultimately leaving the >> tab sticking off to the right by itself.

But on Chrome v35 on my Fedora Linux box, it works flawlessly, even when I jump to a specific slide from the external links below the slider.

On Firefox 22 on my Fedora box, it works flawlessly.

On Firefox 33.1 on Windows, it was almost perfect, the tabs shifted just slightly to the right.

I updated to Firefox 34.0, and now it acts more like Chrome shifting the tabs too far to the left.

IE 11 works almost perfectly, only after some initial trouble caching the pictures. Toward the end of the list, the tabs are shifted ever so slightly to the right.

After the above changes, I tried changing my #gallery to text-align: left, and that broke it. The tabs weren't shifting far enough left as I advanced through the slides, so I put it back on center. Also, Firefox on Windows is the only browser leaving a gap between the tabs and the bottom border. Not the Start tab, just the navigation tabs.

I'm a newbie to website development, learning HTML and CSS as I went building this site. If I hadn't found an example contact form to build off of for the contact page and your AnythingSlider for the Installations page, I wouldn't have been able to complete this site. But I'm learning that trying to get everything to look and work the same on different browsers, versions and platforms is a monumental task.

[Mottie]

I don't know how others would feel, but I only worry about the current version of Chrome, Firefox, Safari and Opera as they all auto-update. IE is the only outlier where you need to test the code in older versions as they are linked to the OS version... in this case, I think you only need to worry about IE8+ (if you even care to support back that far).

Also, it would be better start out page development by first normalizing the css definitions.

Lastly, AnythingSlider hasn't been updated in quite some time, it needs work to support css3 settings like box-sizing, and maybe using css animation, etc. So it would use some improvements as well.

Oh, and sometimes you just can't expect the page to look exactly the same in all browsers. Don't give yourself grey hairs attempting a pixel-perfect exact look, unless you enjoy that kind of thing.