Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Luton, England
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Firefox Alignment Issues

    Hello,

    On a website I'm working on when the page is loaded in Safari/Chrome/IE it looks fine, however, when its loaded in Firefox, the Infinite Carousel seems to be WAY out of alignment. IE originally had a similar issue, but a small fix in the Head tag allowed me to circumvent the issue. I'm not used to Firefox messing up, so I'm completely stumped.

    Here is the code for the Infinite Carousel
    Code:
    <div id="carouselwrap"><div id="kill"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="/storage/js/infinitecarousel/jquery.infinitecarousel.js"></script>
    <script type="text/javascript">
    $(function(){
    $('#carousel').infiniteCarousel();
    });
    </script>
    <style type="text/css">
    #carousel {
    margin:0 auto;
    padding-right: 0px; /*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
    padding-left: 0px;/*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
    width:860px;
    height:150px;
    overflow:scroll;
    border:0px solid #fff;
    }
    #carousel + div {
    margin:0 auto;
    }
    .textholder {
    text-align:left;
    font-size:small;
    padding:6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;	
    -webkit-border-top-right-radius: 6px;
    }
    </style>
    <div id="carousel">
    <ul>
    <li><a href="http://thinkluton.squarespace.com/"><img alt="" src="http://thinkluton.squarespace.com/storage/homeslideone.jpg" width="860" height="150" /></a><p>Welcome To The Think Luton Website</p></li>
    <li><a href="http://thinkluton.squarespace.com/locate-to-luton/"><img alt="" src="http://thinkluton.squarespace.com/storage/homeslidetwo.jpg" width="860" height="150" /></a><p>Relocate To Luton</p></li>
    <li><a href="http://thinkluton.squarespace.com/contact-us/"><img alt="" src="http://thinkluton.squarespace.com/storage/homeslidethree.jpg" width="860" height="150" /></a><p>Network With Us On Linked In</p></li>
    </ul>
    </div>
    </div>
    </div>
    <div id="breaker">
    <img src="http://thinkluton.squarespace.com/storage/topbreaker.png"/>
    </div>
    Here is the CSS for it
    Code:
    #carousel ul {
    list-style: none;
    width:2580px;
    margin: 0;
    padding: 0;
    position:relative;
    }
    #carousel li {
    display:inline;
    float:left;
    }
    (Issue is on the homepage)
    Link to website: http://thinkluton.squarespace.com/
    Personally I hate squarespace, however, the client insisted on it.

    The first screenshot is of it in Chrome and the second is of it in Firefox.

    Any help would be much appreciated.

    Thanks,
    Sam
    Attached Thumbnails Attached Thumbnails Firefox Alignment Issues-loadedinchrome.jpg   Firefox Alignment Issues-loadedinfirefox.jpg  

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Try:

    Code:
    #carouselwrap{clear:left}

  • Users who have thanked SB65 for this post:

    SubScriptZero (02-17-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Luton, England
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Try:

    Code:
    #carouselwrap{clear:left}
    It worked!! Awesome thankyou!!!

    2 Things;

    1: Why did it work? (So I can know for future reference)

    2: Any chance you know how to fix the slight difference in pixel height on the lower blue box?

    Its a few pixels further down in Firefox than in any of the others.
    I'm not sure what to do without affecting how other browsers display it.

    Thanks Again!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You've got a lot of floated elements in the header, and the div wasn't clearing all of them - it was butted up against the twitter link. Different browsers clear floats in different ways - it's one of the more common differences between FF and Safari/Chrome, in my experience.

    Blue box - you mean Airports/Aerospace? That's currently wrapped in #homefloat unlike the other boxes - can it not be included in the same div and positioned after #contentwrapper? That would be the best solution. Otherwise you're relying on absolute positioning which'll need changing every time you alter the content.


  •  

    Posting Permissions

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