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

Home Forums CSS IE 7 cross browser issue

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #28861

    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?



    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)
  • The forum ‘CSS’ is closed to new topics and replies.