SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good old cross-browser compatibility

    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. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You'll likely just need to clear floats.

    Code:
    .slider-bot {clear:both;}
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works. I don't get why it would only be acting this way in Firefox though.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jake.burkart View Post
    I don't get why it would only be acting this way in Firefox though.
    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:

    Code:
    #header {
      overflow: hidden;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •