Why does the navigation arrow move when clicked?

I am seeing an odd behavior in Chrome 20.0.1105.0 dev on Linux that moves the Navigation arrow when it is clicked and the next page of content is loaded.
http://cpradio.no-ip.info:12710/clients/marineconnection/InventoryListing/demo.php

You can see the navigation arrows on the slider move 5-10 pixels to the right when clicked (the first time, and remain in that new position thereafter). If you press F12 to bring up the developer tools or refresh the page, the arrow moves back to the correct position. It is like Chrome is keeping a prior padding amount and adding to it when the new content is loaded.

Can someone help me figure this out? I just really do not know where to start, I’ve monitored the effects in the Developer Tools, but since loading the Developer Tools causes the arrows to move back, its a tad bit difficult.

Thanks,
Matt

Fiddling around with Developer tools tells me you’re dealing with a browser default issue. You might consider using a reset to strip the defaults out and reconfiguring the CSS to cope with the reset.

It has no horizontal coordinate. Try giving the arrows a left (or preferably, right) coordinate to let it know where to place itself. The browser is guessing right now.

The parent will need positoin:relative to have a starting point though, for the AP element :).

Thank you! You nailed it. The reset didn’t change anything, but obviously doesn’t hurt to have it. The horizontal aspect solved it. I tried that earlier, but must not have put the position:relative on the parent as the controls went outside of the container.

Thanks,
Matt

You’re welcome :).

Nice catch, Ryan. He obviously spent more time on it than I did, and he’s a better CSS guru than I am. (Shhh!)

[ot]Nah. I honestly only thought of that as a possible reason. If it wasn’t that, I’d have no idea :p. I generally never spend more than a few minutes on a thread. There are simply too many! :frowning:

I’m an EX CSS Guru* [/ot]