IE 7 cross browser issue

[javlonchik]

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!

[leonzinger]

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

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

[Author]

Posts