I am creating a very simple website and installed the flex slider on my home page. I tested it in Adobe Broswer Lab, and it looks great in every browser - except IE 6-9. Is there an easy way to remedy this? Any advice or suggestions is appreciated. Thanks in advance!
The site is not live yet. Below are the two css style sheets that came with the slider. I tweaked them to fit my needs, so maybe I accidentally deleted something? Any help/advice is appreciated. Thanks!
flexslider.css
/*
* jQuery FlexSlider v1.8
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=# 4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000 000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 18px; line-height: 18px;}
/* Direction Nav */
.flex-direction-nav { height: 0; }
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li .prev {left: -20px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
demo.css
/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
#container {width: 100%; max-width: 1024px; margin: 0 auto;}
Hi, this is kinda of off topic and its another question too so please bare with me,
I put the flexslider in the web page, and I changed the slides to 600X300, everything works greate, except when I shorten the width of the browser, the content move relative to the new browser size, but the slides are fixed and I dont know which css rule to tweak so that it can be relative to the changes in browser size. (tried to add new properties:position to .felxslider but doesnt seem to allow me to do so)
thank you
North America
Europe, Middle East and Africa
Asia Pacific