FlexSlider Images does not appear the same in IE vs Chrome

I have a flexslider images on my page(s), and I can’t seem to figure out why the images are displaying in a different location in IE vs. Chrome. Does anyone have any advice how I can make the location consistent regardless of browser? Chrome is showing in the correct location, and IE has the images pushed over to the top off the boundary of my page

Code

/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* 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 {width: 100%; display: block;}
.flex-control-thumbs img {cursor:pointer;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 100%;}

/* 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 {overflow:hidden; position: relative; z-index:2;}
.flexslider.top_slider {min-height:564px; background-color:#ccc;}
.flexslider.top_slider:before {
	content:'';
	position:absolute;
	z-index:3;
	left:0;
	bottom:0;
	width:100%;
	height:80px;
	background-image:url(../images/slider/slide_shadow.png);
	background-repeat:repeat-x;
	background-size:auto 100%;
	-webkit-background-size:auto 100%;
}
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }



/* Direction Nav */
.flexslider.top_slider .flex-direction-nav {
	position:relative;
	margin:0 auto;
}

.flexslider.top_slider .flex-direction-nav li a {
	position:absolute;
	z-index:300;
	bottom:50px;
	display:block;
	width:70px;
	height:70px;
	font-family:FontAwesome;
	text-align:center;
	background-color:#fff;
}
.flexslider.top_slider .flex-direction-nav li a:hover {background-color:#333;}
.flexslider.top_slider .flex-direction-nav li a.flex-prev {left:0;}
.flexslider.top_slider .flex-direction-nav li a.flex-next {left:71px;}
.flexslider.top_slider .flex-direction-nav li a:before {
	position:absolute;
	left:0;
	top:0;
	width:70px;
	height:70px;
	line-height:66px;
	font-size:32px;
	color:#333;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.flexslider.top_slider .flex-direction-nav li a.flex-prev:before {content: "\f104";}
.flexslider.top_slider .flex-direction-nav li a.flex-next:before {content: "\f105";}
.flexslider.top_slider .flex-direction-nav li a:hover:before {color:#fff;}



/* __________ Portfolio Post Direction Nav __________ */
.flexslider.portfolio_single_slider {position:relative;}
.flexslider.portfolio_single_slider .flex-direction-nav li a {
	position:absolute;
	z-index:300;
	top:0;
	bottom:0;
	display:block;
	width:200px;
	height:100%;
	font-family:FontAwesome;
	text-align:center;
	opacity:0;
}
.flexslider.portfolio_single_slider .flex-direction-nav li a:hover {background:none;}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-prev {left:-50px;}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-next {right:-50px;}
.flexslider.portfolio_single_slider:hover .flex-direction-nav li a.flex-prev {left:0; opacity:1;}
.flexslider.portfolio_single_slider:hover .flex-direction-nav li a.flex-next {right:0; opacity:1;}
.flexslider.portfolio_single_slider .flex-direction-nav li a:before {
	position:absolute;
	top:50%;
	width:70px;
	height:70px;
	margin-top:-35px;
	line-height:66px;
	font-size:32px;
	color:rgba(0,0,0,0.5);
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-prev:before {content: "\f104"; left:0;}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-next:before {content: "\f105"; right:0;}
.flexslider.portfolio_single_slider .flex-direction-nav li a:hover:before {color:#fff;}



/* __________ Control Navigation __________ */
.flex-control-nav {
	position:absolute;
	z-index:300;
	left:0;
	bottom:30px;
	width:100%;
	text-align:center;
}
.flex-control-nav li {
	display:inline-block;
	margin:0 8px;
}
.flex-control-nav li a {
	display:block;
	width:10px;
	height:10px;
	border-radius:50%;
	border:2px solid #333;
	background-color:#fff;
	font-size:0;
	cursor:pointer;
	transition: none;
	-webkit-transition: none;
}
.flex-control-nav li a.flex-active {
	position:relative;
	top:-3px;
	left:-3px;
	right:-3px;
	width:16px;
	height:16px;
	background-color:#333;
	cursor:default;
}




/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }



/* Works Slider */
.flexslider.works_slider .flex-direction-nav li a {
	position:absolute;
	z-index:300;
	bottom:30px;
	display:block;
	width:50px;
	height:50px;
	font-family:FontAwesome;
	text-align:center;
	background-color:#fff;
}
.flexslider.works_slider .flex-direction-nav li a:hover {background-color:#333;}
.flexslider.works_slider .flex-direction-nav li a.flex-prev {left:20px;}
.flexslider.works_slider .flex-direction-nav li a.flex-next {left:70px;}
.flexslider.works_slider .flex-direction-nav li a:before {
	position:absolute;
	left:0;
	top:0;
	width:50px;
	height:50px;
	line-height:46px;
	font-size:32px;
	color:#333;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.flexslider.works_slider .flex-direction-nav li a.flex-prev:before {content: "\f104";}
.flexslider.works_slider .flex-direction-nav li a.flex-next:before {content: "\f105";}
.flexslider.works_slider .flex-direction-nav li a:hover:before {color:#fff;}




/* Control Nav */
.flex-control-thumbs {
	position: absolute;
	z-index:200;
	left:0;
	bottom:50px;
	width:100%;
	text-align:center;
}
.flex-control-thumbs li {
	
	position:relative;
	display:inline-block;
	width: 100px;
	height:70px;
	margin: 0 5px;
}
.flex-control-thumbs img {
	position:asbolute;
	width: auto;
	max-width:none;
	height:100%;
	display: block;
	cursor: pointer;
}
.flex-control-thumbs li img.flex-active:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	border:5px solid #fff;
}


/* thumb navigation */
#carousel {
	position:absolute;
	left:1px;
	bottom:45px;
	width:100%;
}
#carousel .slides {text-align:center;}
#carousel .slides li {
	overflow:hidden;
	z-index:10 !important;
	float:none !important;
	display:inline-block !important;
	padding:5px 0 0;
	width:105px !important;
	height:75px !important;
	margin:0 2px 0 5px !important;
	opacity:1 !important;
	cursor:pointer;
	box-shadow:3px 3px 3px rgba(0,0,0,0.15);
}
#carousel .slides li.flex-active-slide:before {
	content:'';
	position:absolute;
	left:0;
	top:5px;
	right:0;
	bottom:0;
	border:5px solid transparent;
}
#carousel .slides li.flex-active-slide:before {border-color:#fff;}

#carousel .slides li.flex-active-slide:after {
	content:'';
	position:absolute;
	left:50%;
	top:0;
	margin-left:-2px;
	width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #fff;
}

#carousel .slides li img {
	width:auto;
	max-width:none;
	height:100%;
}





/* Caption */
.top_slider .slide1 {
	height:100%;
	background-image:url(../images/slider/slide1_bg.jpg);
	background-size:cover;
	background-attachment:fixed !important;
}

.top_slider .slide1 .flex_caption1 {
	position:absolute;
	z-index:30;
	left:50%;
	top:45%;
	width:100%;
	margin-left:-585px;
	color:#fff;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.top_slider .slide1 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;}
.top_slider .slide1 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide1 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide1 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;}



.top_slider .slide2 {
	height:100%;
	background-image:url(../images/slider/slide2_bg.jpg);
	background-size:cover;
	background-attachment:fixed !important;
}

.top_slider .slide2 .flex_caption1 {
	position:absolute;
	z-index:30;
	left:50%;
	top:45%;
	width:100%;
	margin-left:-585px;
	color:#fff;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.top_slider .slide2 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;}
.top_slider .slide2 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide2 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide2 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;}


.top_slider .slide3 {
	height:100%;
	background-image:url(../images/slider/slide3_bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

.top_slider .slide3 .flex_caption1 {
	position:absolute;
	z-index:30;
	left:50%;
	top:45%;
	width:100%;
	margin-left:-585px;
	color:#fff;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.top_slider .slide3 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;}
.top_slider .slide3 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide3 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide3 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;}


.top_slider .slide_btn {
	position:absolute;
	z-index:110;
	bottom:50px;
	left:50%;
	width:171px;
	display:inline-block;
	margin-left:414px;
	padding:26px 30px 24px;
	text-transform:uppercase;
	font-weight:900;
	color:#333;
	background-color:#fff;
}
.top_slider .slide_btn:hover {background-color:#1c1c1c; color:#fff;}
.top_slider .slide_btn:before {
	position:absolute;
	content: "\f105";
	right:30px;
	top:0;
	width:20px;
	height:20px;
	font-family:FontAwesome;
	text-align:right;
	line-height:66px;
	font-size:32px;
	color:#333;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.top_slider .slide_btn:hover:before {color:#fff;}




/* __________ Video Slide __________ */
.slide3 .buttonBar {display:none;}

#controlBar_P2 {display:none !important;}

.slide3.bg {
	height:100%;
	background-image:url(../images/slider/slide3_bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}

#carousel .slides li .video {
	position:absolute;
	left:50%;
	top:50%;
	width:30px;
	height:30px;
	margin:-15px 0 0 -15px;
	background-image:url(../images/video.png);
	background-repeat:no-repeat;
	background-size:100% auto;
	-webkit-background-size:100% auto;
}

/* _________ //Video Slide _________ */









/* Flex Caption Effect */
.FadeIn, .FromTop, .FromRight, .FromBottom, .FromLeft {opacity: 0; transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out;}
.captionDelay1 {transition-delay: 0.1s; -webkit-transition-delay: 0.1s;}
.captionDelay2 {transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}
.captionDelay3 {transition-delay: 0.3s; -webkit-transition-delay: 0.3s;}
.captionDelay4 {transition-delay: 0.4s; -webkit-transition-delay: 0.4s;}
.captionDelay5 {transition-delay: 0.5s; -webkit-transition-delay: 0.5s;}
.captionDelay6 {transition-delay: 0.6s; -webkit-transition-delay: 0.6s;}
.captionDelay7 {transition-delay: 0.7s; -webkit-transition-delay: 0.7s;}
.captionDelay8 {transition-delay: 0.8s; -webkit-transition-delay: 0.8s;}
.captionDelay9 {transition-delay: 0.9s; -webkit-transition-delay: 0.9s;}
.captionDelay10 {transition-delay: 1s; -webkit-transition-delay: 1s;}
.captionDelay11{transition-delay: 1.1s; -webkit-transition-delay: 1.1s;}
.captionDelay12 {transition-delay: 1.2s; -webkit-transition-delay: 1.2s;}

.flexslider li.flex-active-slide .FadeIn {opacity: 1;}
.flexslider li .FromTop {transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%);}
.flexslider li.flex-active-slide .FromTop {opacity: 1; transform: translateY(0); -o-transform: translateY(0%); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
.flexslider li .FromBottom {transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%);}
.flexslider li.flex-active-slide .FromBottom {opacity: 1; transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
.flexslider li .FromLeft {transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%);}
.flexslider li.flex-active-slide .FromLeft {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);}
.flexslider li .FromRight {transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%);}
.flexslider li.flex-active-slide .FromRight {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);}








/* Responsive Styles */
@media (min-width: 992px) and (max-width: 1199px) {
	.top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:-485px;}
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:70px; line-height:70px;}
	.top_slider .slide_btn {margin-left:314px;}
	
	
}

@media (min-width: 768px) and (max-width: 991px) {
	.top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:-375px;}
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:60px; line-height:60px;}
	.top_slider .slide_btn {margin-left:204px;}
	
	.top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {font-size:17px; line-height:24px; width:450px;}
	
	
}

@media (max-width: 767px) {
	.flexslider.top_slider:before {height:40px;}
	
	
	.top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:0; left:15px;}
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:40px; line-height:40px;}
	
	.top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {font-size:13px; line-height:19px; width:420px;}
	
	
	#carousel .slides li {width:70px !important; height:55px !important; margin:0 0 0 2px !important;}
	
	
	.flexslider.top_slider .flex-direction-nav li a {width:50px; height:50px;}
	.flexslider.top_slider .flex-direction-nav li a.flex-next {left:51px;}
	.flexslider.top_slider .flex-direction-nav li a:before {width:50px; height:50px; line-height:46px;}
	
	
	.top_slider .slide_btn {padding:15px 20px 15px 5px; width:auto; left:auto; right:15px; margin:0;}
	.top_slider .slide_btn:before {right:5px; font-size:18px; top:-7px;}
	
	
}

@media (max-width: 479px) {
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:26px; line-height:26px;}
	
	.top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {width:290px;}
	
	#carousel {display:none;}
	
	
}

Do you have a link to the page concerned (we will most likely need to see the html anyway) as these kinds of bugs are easier to diagnose with a live example to hand?

The Website is not live yet but this is how it display in the Browsers in Chrome it display correct and
in Internet Explorer it moves the background image up

How it display in Internet Explorer Windows 8

How it displays in Chrome Windows 8

I want Chrome to display the same as in Internet Explorer i been struggling with this issue for days havent found a fix can you please help me

I would try to contact Woo and see if it’s a known bug or if there’s an IE fix for this.
Have you tried gecko browsers (ie firefox)?

It display the same in Firefox and Internet Explorer but in Chrome it works perfect

Which version of IE is it?
Also, we need to see the html as well as the css.

HTML


<section id="home" class="padbot0">
			
		<!-- TOP SLIDER -->
		<div class="flexslider top_slider" >
			<ul class="slides">
				<li class="slide1">
					<div class="flex_caption1" >
						<p class="title1 captionDelay2 FromTop">Welcome</p>
						<p class="title2 captionDelay4 FromTop">&nbsp;to Victorian</p>
						<p class="title3 captionDelay6 FromTop">&nbsp; Wholesaler</p>
						<p class="title4 captionDelay7 FromBottom"></p>
					</div>
					
				<li class="slide2">
					<div class="flex_caption1" >
						<p class="title1 captionDelay6 FromLeft">Delicious</p>
						<p class="title2 captionDelay4 FromLeft">&nbsp;Meat</p>
						<p class="title3 captionDelay2 FromLeft">&nbsp;Products</p>
						<p class="title4 captionDelay7 FromLeft"></p>
					</div>
				
				</li>
				<li class="slide3">
					<div class="flex_caption1" >
						<p class="title1 captionDelay1 FromBottom">Quality</p>
						<p class="title2 captionDelay2 FromBottom">&nbsp;Fish & Chips</p>
						<p class="title3 captionDelay3 FromBottom">&nbsp;Products</p>
						<p class="title4 captionDelay5 FromBottom"></p>
					</div>
					
					
					<!-- VIDEO BACKGROUND -->
					<a id="P2" class="player" data-property="{videoURL:'tDvBwPzJ7dY',containment:'.top_slider .slide3',autoPlay:true, mute:false, startAt:0, opacity:1}" ></a>
					<!-- //VIDEO BACKGROUND -->
				</li>
			</ul>
		</div>
		<!-- //TOP SLIDER -->
	</section><!-- //HOME -->

CSS (flexslider.css)


/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* 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 {width: 100%; display: block;}
.flex-control-thumbs img {cursor:pointer;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 100%;}

/* 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 {overflow:hidden; position: relative; z-index:2;}
.flexslider.top_slider {min-height:564px; background-color:#ccc;}
.flexslider.top_slider:before {
	content:'';
	position:absolute;
	z-index:3;
	left:0;
	bottom:0;
	width:100%;
	height:80px;
	background-image:url(../images/slider/slide_shadow.png);
	background-repeat:repeat-x;
	background-size:auto 100%;
	-webkit-background-size:auto 100%;
}
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }



/* Direction Nav */
.flexslider.top_slider .flex-direction-nav {
	position:relative;
	margin:0 auto;
}

.flexslider.top_slider .flex-direction-nav li a {
	position:absolute;
	z-index:300;
	bottom:50px;
	display:block;
	width:70px;
	height:70px;
	font-family:FontAwesome;
	text-align:center;
	background-color:#fff;
}
.flexslider.top_slider .flex-direction-nav li a:hover {background-color:#333;}
.flexslider.top_slider .flex-direction-nav li a.flex-prev {left:0;}
.flexslider.top_slider .flex-direction-nav li a.flex-next {left:71px;}
.flexslider.top_slider .flex-direction-nav li a:before {
	position:absolute;
	left:0;
	top:0;
	width:70px;
	height:70px;
	line-height:66px;
	font-size:32px;
	color:#333;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.flexslider.top_slider .flex-direction-nav li a.flex-prev:before {content: "\f104";}
.flexslider.top_slider .flex-direction-nav li a.flex-next:before {content: "\f105";}
.flexslider.top_slider .flex-direction-nav li a:hover:before {color:#fff;}



/* __________ Portfolio Post Direction Nav __________ */
.flexslider.portfolio_single_slider {position:relative;}
.flexslider.portfolio_single_slider .flex-direction-nav li a {
	position:absolute;
	z-index:300;
	top:0;
	bottom:0;
	display:block;
	width:200px;
	height:100%;
	font-family:FontAwesome;
	text-align:center;
	opacity:0;
}
.flexslider.portfolio_single_slider .flex-direction-nav li a:hover {background:none;}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-prev {left:-50px;}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-next {right:-50px;}
.flexslider.portfolio_single_slider:hover .flex-direction-nav li a.flex-prev {left:0; opacity:1;}
.flexslider.portfolio_single_slider:hover .flex-direction-nav li a.flex-next {right:0; opacity:1;}
.flexslider.portfolio_single_slider .flex-direction-nav li a:before {
	position:absolute;
	top:50%;
	width:70px;
	height:70px;
	margin-top:-35px;
	line-height:66px;
	font-size:32px;
	color:rgba(0,0,0,0.5);
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-prev:before {content: "\f104"; left:0;}
.flexslider.portfolio_single_slider .flex-direction-nav li a.flex-next:before {content: "\f105"; right:0;}
.flexslider.portfolio_single_slider .flex-direction-nav li a:hover:before {color:#fff;}



/* __________ Control Navigation __________ */
.flex-control-nav {
	position:absolute;
	z-index:300;
	left:0;
	bottom:30px;
	width:100%;
	text-align:center;
}
.flex-control-nav li {
	display:inline-block;
	margin:0 8px;
}
.flex-control-nav li a {
	display:block;
	width:10px;
	height:10px;
	border-radius:50%;
	border:2px solid #333;
	background-color:#fff;
	font-size:0;
	cursor:pointer;
	transition: none;
	-webkit-transition: none;
}
.flex-control-nav li a.flex-active {
	position:relative;
	top:-3px;
	left:-3px;
	right:-3px;
	width:16px;
	height:16px;
	background-color:#333;
	cursor:default;
}




/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }



/* Works Slider */
.flexslider.works_slider .flex-direction-nav li a {
	position:absolute;
	z-index:300;
	bottom:30px;
	display:block;
	width:50px;
	height:50px;
	font-family:FontAwesome;
	text-align:center;
	background-color:#fff;
}
.flexslider.works_slider .flex-direction-nav li a:hover {background-color:#333;}
.flexslider.works_slider .flex-direction-nav li a.flex-prev {left:20px;}
.flexslider.works_slider .flex-direction-nav li a.flex-next {left:70px;}
.flexslider.works_slider .flex-direction-nav li a:before {
	position:absolute;
	left:0;
	top:0;
	width:50px;
	height:50px;
	line-height:46px;
	font-size:32px;
	color:#333;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.flexslider.works_slider .flex-direction-nav li a.flex-prev:before {content: "\f104";}
.flexslider.works_slider .flex-direction-nav li a.flex-next:before {content: "\f105";}
.flexslider.works_slider .flex-direction-nav li a:hover:before {color:#fff;}




/* Control Nav */
.flex-control-thumbs {
	position: absolute;
	z-index:200;
	left:0;
	bottom:50px;
	width:100%;
	text-align:center;
}
.flex-control-thumbs li {
	overflow:hidden;
	position:relative;
	display:inline-block;
	width: 100px;
	height:70px;
	margin: 0 5px;
}
.flex-control-thumbs img {
	position:asbolute;
	width: auto;
	max-width:none;
	height:100%;
	display: block;
	cursor: pointer;
}
.flex-control-thumbs li img.flex-active:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	border:5px solid #fff;
}


/* thumb navigation */
#carousel {
	position:absolute;
	left:1px;
	bottom:45px;
	width:100%;
}
#carousel .slides {text-align:center;}
#carousel .slides li {
	overflow:hidden;
	z-index:10 !important;
	float:none !important;
	display:inline-block !important;
	padding:5px 0 0;
	width:105px !important;
	height:75px !important;
	margin:0 2px 0 5px !important;
	opacity:1 !important;
	cursor:pointer;
	box-shadow:3px 3px 3px rgba(0,0,0,0.15);
}
#carousel .slides li.flex-active-slide:before {
	content:'';
	position:absolute;
	left:0;
	top:5px;
	right:0;
	bottom:0;
	border:5px solid transparent;
}
#carousel .slides li.flex-active-slide:before {border-color:#fff;}

#carousel .slides li.flex-active-slide:after {
	content:'';
	position:absolute;
	left:50%;
	top:0;
	margin-left:-2px;
	width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #fff;
}

#carousel .slides li img {
	width:auto;
	max-width:none;
	height:100%;
}





/* Caption */
.top_slider .slide1 {
	height:100%;
	background-image:url(../images/slider/slide1_bg.jpg);
	background-size:cover;
	background-attachment:fixed !important;
}

.top_slider .slide1 .flex_caption1 {
	position:absolute;
	z-index:30;
	left:50%;
	top:45%;
	width:100%;
	margin-left:-585px;
	color:#fff;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.top_slider .slide1 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;}
.top_slider .slide1 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide1 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide1 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;}



.top_slider .slide2 {
	height:100%;
	background-image:url(../images/slider/slide2_bg.jpg);
	background-size:cover;
	background-attachment:fixed !important;
}

.top_slider .slide2 .flex_caption1 {
	position:absolute;
	z-index:30;
	left:50%;
	top:45%;
	width:100%;
	margin-left:-585px;
	color:#fff;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.top_slider .slide2 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;}
.top_slider .slide2 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide2 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide2 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;}


.top_slider .slide3 {
	height:100%;
	background-image:url(../images/slider/slide3_bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

.top_slider .slide3 .flex_caption1 {
	position:absolute;
	z-index:30;
	left:50%;
	top:45%;
	width:100%;
	margin-left:-585px;
	color:#fff;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.top_slider .slide3 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;}
.top_slider .slide3 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide3 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;}
.top_slider .slide3 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;}


.top_slider .slide_btn {
	position:absolute;
	z-index:110;
	bottom:50px;
	left:50%;
	width:171px;
	display:inline-block;
	margin-left:414px;
	padding:26px 30px 24px;
	text-transform:uppercase;
	font-weight:900;
	color:#333;
	background-color:#fff;
}
.top_slider .slide_btn:hover {background-color:#1c1c1c; color:#fff;}
.top_slider .slide_btn:before {
	position:absolute;
	content: "\f105";
	right:30px;
	top:0;
	width:20px;
	height:20px;
	font-family:FontAwesome;
	text-align:right;
	line-height:66px;
	font-size:32px;
	color:#333;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.top_slider .slide_btn:hover:before {color:#fff;}




/* __________ Video Slide __________ */
.slide3 .buttonBar {display:none;}

#controlBar_P2 {display:none !important;}

.slide3.bg {
	height:100%;
	background-image:url(../images/slider/slide3_bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}

#carousel .slides li .video {
	position:absolute;
	left:50%;
	top:50%;
	width:30px;
	height:30px;
	margin:-15px 0 0 -15px;
	background-image:url(../images/video.png);
	background-repeat:no-repeat;
	background-size:100% auto;
	-webkit-background-size:100% auto;
}

/* _________ //Video Slide _________ */









/* Flex Caption Effect */
.FadeIn, .FromTop, .FromRight, .FromBottom, .FromLeft {opacity: 0; transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out;}
.captionDelay1 {transition-delay: 0.1s; -webkit-transition-delay: 0.1s;}
.captionDelay2 {transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}
.captionDelay3 {transition-delay: 0.3s; -webkit-transition-delay: 0.3s;}
.captionDelay4 {transition-delay: 0.4s; -webkit-transition-delay: 0.4s;}
.captionDelay5 {transition-delay: 0.5s; -webkit-transition-delay: 0.5s;}
.captionDelay6 {transition-delay: 0.6s; -webkit-transition-delay: 0.6s;}
.captionDelay7 {transition-delay: 0.7s; -webkit-transition-delay: 0.7s;}
.captionDelay8 {transition-delay: 0.8s; -webkit-transition-delay: 0.8s;}
.captionDelay9 {transition-delay: 0.9s; -webkit-transition-delay: 0.9s;}
.captionDelay10 {transition-delay: 1s; -webkit-transition-delay: 1s;}
.captionDelay11{transition-delay: 1.1s; -webkit-transition-delay: 1.1s;}
.captionDelay12 {transition-delay: 1.2s; -webkit-transition-delay: 1.2s;}

.flexslider li.flex-active-slide .FadeIn {opacity: 1;}
.flexslider li .FromTop {transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%);}
.flexslider li.flex-active-slide .FromTop {opacity: 1; transform: translateY(0); -o-transform: translateY(0%); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
.flexslider li .FromBottom {transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%);}
.flexslider li.flex-active-slide .FromBottom {opacity: 1; transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
.flexslider li .FromLeft {transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%);}
.flexslider li.flex-active-slide .FromLeft {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);}
.flexslider li .FromRight {transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%);}
.flexslider li.flex-active-slide .FromRight {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);}








/* Responsive Styles */
@media (min-width: 992px) and (max-width: 1199px) {
	.top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:-485px;}
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:70px; line-height:70px;}
	.top_slider .slide_btn {margin-left:314px;}
	
	
}

@media (min-width: 768px) and (max-width: 991px) {
	.top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:-375px;}
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:60px; line-height:60px;}
	.top_slider .slide_btn {margin-left:204px;}
	
	.top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {font-size:17px; line-height:24px; width:450px;}
	
	
}

@media (max-width: 767px) {
	.flexslider.top_slider:before {height:40px;}
	
	
	.top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:0; left:15px;}
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:40px; line-height:40px;}
	
	.top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {font-size:13px; line-height:19px; width:420px;}
	
	
	#carousel .slides li {width:70px !important; height:55px !important; margin:0 0 0 2px !important;}
	
	
	.flexslider.top_slider .flex-direction-nav li a {width:50px; height:50px;}
	.flexslider.top_slider .flex-direction-nav li a.flex-next {left:51px;}
	.flexslider.top_slider .flex-direction-nav li a:before {width:50px; height:50px; line-height:46px;}
	
	
	.top_slider .slide_btn {padding:15px 20px 15px 5px; width:auto; left:auto; right:15px; margin:0;}
	.top_slider .slide_btn:before {right:5px; font-size:18px; top:-7px;}
	
	
}

@media (max-width: 479px) {
	.top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:26px; line-height:26px;}
	
	.top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {width:290px;}
	
	#carousel {display:none;}
		
}

Is Internet Explorer 11

Please zip up the whole working page and attach it to this thread. Until we can run an exact demo of what you have it will be hard to guess at the problem.

At present the code you have given so far will look the same in IE and chrome. We need all your css and all your html as you cannot debug code in isolation because simple things like the doctype can change how pages look across browsers.

image_slider.zip (1.1 MB)

Hey PaulOB I have send you the zip file

Ok, I’ve had a quick look and one of the reasons for the differences is that you have a webkit hack offering different background attachment values for webkit browsers.

style.css line 1659

@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.parallax, .cleancode_block, #team, .top_slider .slide1, .top_slider .slide2, .top_slider .slide3 {background-attachment:scroll !important; background-position:0 0;}
	.top_slider .slide1, .top_slider .slide2, .top_slider .slide3 {background-size:cover !important;}

}

Specifically:

background-attachment:scroll !important

In flexslider css other browsers are getting this:

.top_slider .slide2 {
	height:100%;
	background-image:url(../images/slider/slide2_bg.jpg);
	background-size:cover;
	background-attachment:fixed !important;
}

Specifically:

`background-attachment:fixed !important;`

That means that some browsers (webkit) will be scrolling the image with the viewport and placed in relation to the element they occupy and other browsers will be using fixed positioned images which are placed relative to the body element and not the element they occupy hence the different behaviour and positions (also dependent on viewport width and height).

You have to find out why you are hacking webkit (always a bad move) and then decide on which approach you want to implement for all?

I’m guessing the fixed positioned background images in IE are for the parallax effect and maybe the webkit hack was to stop that effect on mobile browsers as they can’t handle fixed positioning alongside background-size:cover (a nasty bug/behaviour). However I would have thought a media query for small devices would have been better and remove the background-attachment:fixed for all browsers on smaller screens.

To make things harder your page is a mass of complex scripts and the general opinion is that unless you understand the scripts you are adding in some detail then it is likely you will run into issues you will find hard to solve. I realise that its not always possible to do this where advanced scripts are in place but it helps if you have tried and tested them in isolation first.:slight_smile:

(Back tomorrow now as that took more time than I would have liked ;))

.

3 Likes

Thank you PaulOB for all your help much appreciated can you just tell me one more thing the Pretty Photo gallery display in all browsers (Chrome, Firefox, Safari, Opera) fast but in Internet Explorer it takes forever to load and open can you just answer that one last question for me pretty please. Im talking about the Projects link

Thanks in advance

Hi,

This is really a question for the JS forum I think as JS isn’t my strongpoint. However I downloaded prettyPhoto and their standard demos are also very slow in IE11 so I guess its either the way it was built or something that IE11 doesn’t like locally.

If you view the pretty photo demos online they seem to work ok but locally they take ages.

I suggest you upload your site and test online to see if the issue is cured. If not raise the question in the Js forum or I can move this thread to the forum instead.

1 Like

Thank you PaulOB for all your help much appreciated

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.