The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // 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:

    jQuery Coda-Slider v2.0 –
    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;

    /* 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?


    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed