Grow your CSS skills. Land your dream job.

IE 7 cross browser issue

  • # April 27, 2010 at 3:10 pm

    Hi all,

    Before creating this post, I made sure everything was valid. After customizing coda slider, I am experiencing a cross-browser compatibility issue on IE7. IE 8, Chrome, and FF seem to display the code fine. All of the panel structure and the last transition is gone.

    Can you please take a look? It’s located here:

    http://www.chudostyle.com/coda/index.html

    Code:
    /*
    jQuery Coda-Slider v2.0 – http://www.ndoherty.biz/coda-slider
    Copyright (c) 2009 Niall Doherty
    This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
    */

    /* Insignificant stuff, for demo purposes */

    .panel h1.title { color: #FFFFFF; }
    noscript div { background: #ccc; border: 1px solid #900; margin:0; padding: 0px; }

    /* Most common stuff you’ll need to change */

    .coda-slider-wrapper {color:#CCCCCC;}
    .coda-slider { background: url(../images/slider-bg.jpg) no-repeat;}

    /*separeted txt and img*/

    #txtcont{float:left; width:60%;font-size:14px; font-family:Georgia, “Times New Roman”, Times, serif; position:relative;}

    #imgcont{float:right; position:relative; border:#999999 solid 2px; width:35%; padding-right:10px; bottom:25px;}

    /* Use this to keep the slider content contained in a box even when JavaScript is disabled */
    .coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }

    /* Change the width of the entire slider (without dynamic arrows) */
    .coda-slider, .coda-slider .panel { width: 675px; height:200px; border:thick 2px #FF0000; }

    /* Change margin and width of the slider (with dynamic arrows) */
    .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 675px; }

    /* Arrow styling */
    .coda-nav-left a, .coda-nav-right a {
    background: #00386B;
    color: #fff;
    padding: 5px;
    width:100px;
    z-index:1;
    position:relative;
    top:172px;}

    /* Tab nav */
    .coda-nav ul li a.current { background: #39c }

    /* Panel padding */
    .coda-slider .panel-wrapper { padding: 20px }

    /* Preloader */
    .coda-slider p.loading { padding: 20px; text-align: center }

    /* Don’t change anything below here unless you know what you’re doing */

    /* Tabbed nav*/
    .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
    .coda-nav ul li { display: inline }
    .coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }

    /* Miscellaneous */
    .coda-slider-wrapper { clear: both; overflow: auto;}
    .coda-slider { float: left; overflow: hidden; position: relative; }
    .coda-slider .panel { display: block; float: left }
    .coda-slider .panel-container { position: relative }
    .coda-nav-left {z-index:1;position:absolute;}
    .coda-nav-right {z-index:1; ;position:absolute; left:565px;}
    .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }

    What could be the issue?

    Thanks!

    # April 28, 2010 at 8:01 am

    add the left:0; to the next class like that it should work:

    .coda-nav-left {z-index:1;position:absolute;left:0;}

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".