Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Anything Slider – Hiding Overflow in IE

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #30768
    burtflaxton
    Participant

    Hey fellas,

    Getting anxious because we are launching a new site the day before Black Friday, yet I still have a few problems with IE.

    I have used Anything Slider for my home page banner, a featured product scroller, and on my final product page.

    On my final product page, I have used Anything Slider to scroll between tabbed product descriptions, instructions, applications, and recommended products. Everything works perfect in FF & Chrome. In IE, once I click on “instructions” to scroll to the next tabbed field, all of the content in the tabs shows. I have linked to an example below.

    Any ideas/direction/advice is much appreciated. Also, if anyone knows how I would go about debugging errors in IE I would appreciate some guidance in that area. I know IE does not have a Firebug equivalent, but there must be something.

    http://turbodieselpower.com/afe-full-metal-power-cold-air-intake-system-pds-dodge-ram-2500-3500-07-5-09-6-7l-td.html

    #73345
    burtflaxton
    Participant

    http://pastie.org/1315454

    /*
    anythingSlider v1.2

    By Chris Coyier: https://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    */
    .anythingSlider { width: 716px; height: 303px; position: relative; margin: 0; }
    .anythingSlider .wrapper { width: 716px; overflow: auto; height: 303px; margin: 0; position: absolute; top: 0; left: 0; }

    /* Width below is max for Opera */
    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
    .anythingSlider .wrapper ul li { display: block; float: left; padding: 0; height: 317px; width: 716px; margin: 0; }
    .anythingSlider .arrow { display: none }
    .anythingSlider .forward { display: none }
    .anythingSlider .back { display: none }
    .anythingSlider .forward:hover { display: none }
    .anythingSlider .back:hover { display: none }

    .anythingSlider-product-grid { width: 950px; height: 303px; position: relative; margin: 0 auto 15px; }
    .anythingSlider-product-grid .wrapper { width: 855px; overflow: auto; height: 303px; margin: 0 48px; position: absolute; top: 0; left: 0; }

    /* Width below is max for Opera */
    .anythingSlider-product-grid .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
    .anythingSlider-product-grid .wrapper ul li { display: inline; float: left; padding: 0; height: auto; width: 170px; margin: 0; text-align: center !important; }
    .anythingSlider-product-grid .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: -250px; cursor: pointer; }
    .anythingSlider-product-grid .forward { background-position: 0 0; right: -20px; }
    .anythingSlider-product-grid .back { background-position: -67px 0; left: -20px; }
    .anythingSlider-product-grid .forward:hover { background-position: 0 -200px; }
    .anythingSlider-product-grid .back:hover { background-position: -67px -200px; }

    .anythingSlider-product-grid .thumbNav { position: relative; top: 280px; text-align: left; z-index: 9999; }
    .anythingSlider-product-grid .thumbNav li { display: inline; }
    .anythingSlider-product-grid .thumbNav a { display: none }
    .anythingSlider-product-grid .thumbNav a.cur { display: none }

    .anythingSlider-product-grid .start-stop { display: none }
    .anythingSlider-product-grid .start-stop.playing { display: none }
    .anythingSlider-product-grid .start-stop:hover { background-image: none; }

    .anythingSlider-product-collateral { width: 675px; height: 303px; position: relative; margin: 0 auto; display: inline; float: left; }
    .anythingSlider-product-collateral .wrapper2 { width: 675px; z-index: 0; overflow: hidden; height: 303px; margin: 0; position: absolute; top: 0; left: 0; }

    .ui-tabs-panel {overflow: auto !important;}

    /* Width below is max for Opera */
    .anythingSlider-product-collateral .wrapper2 ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; padding: 0; height: 303px; }
    .anythingSlider-product-collateral .wrapper2 ul li { display: inline; float: left; padding: 0 10px; height: auto; width: 662px; margin: 0; text-align: left !important; }
    .anythingSlider-product-collateral .wrapper2 ul li img { margin-bottom: 20px; }
    .anythingSlider-product-collateral .arrow { display: none !important; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: -250px; cursor: pointer; }
    .anythingSlider-product-collateral .forward { background-position: 0 0; right: -20px; }
    .anythingSlider-product-collateral .back { background-position: -67px 0; left: -20px; display: none; }
    .anythingSlider-product-collateral .forward:hover { background-position: 0 -200px; }
    .anythingSlider-product-collateral .back:hover { background-position: -67px -200px; }

    .anythingSlider-product-collateral .thumbNav { position: relative; top: 280px; text-align: left; z-index: 9999; }
    .anythingSlider-product-collateral .thumbNav li { display: inline; }
    .anythingSlider-product-collateral .thumbNav a { display: none }
    .anythingSlider-product-collateral .thumbNav a.cur { display: none }

    .anythingSlider-product-collateral .start-stop { display: none }
    .anythingSlider-product-collateral .start-stop.playing { display: none }
    .anythingSlider-product-collateral .start-stop:hover { background-image: none; }

    .anythingSlider .thumbNav { position: relative; top: 280px; text-align: left; z-index: 9999; }
    .anythingSlider .thumbNav li { display: inline; }
    .anythingSlider .thumbNav li.arrow { display: none; }
    .anythingSlider .thumbNav a { color: #fff; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; text-align: center; font-weight: bold; background-color: #000; }
    .anythingSlider .thumbNav a.cur { background: #6b6767; }

    .anythingSlider .start-stop { display: none }
    .anythingSlider .start-stop.playing { display: none }
    .anythingSlider .start-stop:hover { background-image: none; }

    /*
    Prevents
    */
    .anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
    .anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }
    .anythingSlider-product-grid .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
    .anythingSlider-product-grid .wrapper ul ul li { float: left; }
    .anythingSlider-product-collateral .wrapper2 ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
    .anythingSlider-product-collateral .wrapper2 ul ul li { float: left; }

    .clear { clear: both; }

    #tabs { border: #aaa 1px solid; margin: 15px auto; overflow: hidden; padding: 2px; width: 700px; }
    #tabs .tabs { background: #d6d6d6; border: #aaa 1px solid; padding: 5px 5px 0 5px; }
    #tabs .tabs a { color: #000; text-decoration: none; }
    #tabs .tabs li.active-tab { border: #aaa 1px solid; border-bottom: #fff 1px solid; }
    #tabs .tabs li { background: #fff; border: #d3d3d3 1px solid; border-bottom: #aaa 1px solid; float: left; margin-right: 5px; padding: 5px 10px; position: relative; top: 1px; }

    #tabs #tabs-content, #tabs #tabs-content li { width: 700px; }
    #tabs #tabs-content { clear: both; overflow: hidden; width: 700px;}
    #tabs #tabs-content ul { display: block; width: 3000px; }
    #tabs #tabs-content li { float: left; }
    #tabs #tabs-content li p { margin: 10px; }
    #67560
    mesmonde
    Member

    To Burtflaxton:
    Looks like you got this working in IE7. How did you do it? I am having a similar problem.

    (Also, receive is spelled wrong in your 4th slide on the site, just fyi.)

    #63136
    burtflaxton
    Participant

    I actually had an open div tag somewhere in my design. Closing the div tag fixed the problem. It seems now that I have done something else to cause the tabs to not slide in any browser. It seems that the lightbox is not working either, so I think I have a bigger problem. I will post back here when I figure out the issues.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.