Good old cross-browser compatibility

HTML & CSS
1

Just built a WordPress site for a client. Used a template with a Nivo slider. In Firefox, the slider is pushed off to the right of the page by 960 pixels. The slider is placed properly in IE, Chrome, and Safari. The site is www.bioshieldsystem.com. Any ideas?

2

You’ll likely just need to clear floats.

.slider-bot {clear:both;}
3

Thanks, that works. I don’t get why it would only be acting this way in Firefox though.

4

Each browser calculates pixels sightly differently. In the case of Firefox, the slider was just snagging on the header elements by a pixel or two, because it has calculated the heights of those elements slightly differently. Another way to fix the issue is to add overflow: hidden to the header:

#header {
  overflow: hidden;
}