CSS margin/position issue with flexslider slides in IE WordPress
- SOLVED
I'm having a hard time trying to identify CSS issue that's causing a problem with flexslider in IE. All other browsers work, but IE. For some reason the slide li is being pushed to the right. It has a margin-right: -100% set, but removing it breaks slide transition. For some reason IE uses -100% to pull slides way to the right, while all other browsers behave as expected.
The demo works fine in IE, but my setup has that IE issue. I can't figure out what's causing this issue in IE, everything looks fine.
Here's the demo:
[[LINK href="http://themeforest.net/item/skydream-responsive-multipurpose-wordpress-theme/full_screen_preview/4333137"]]http://themeforest.net/item/skydream-responsive-multipurpose-wordpress-theme/full_screen_preview/4333137[[/LINK]]
Here's live version:
[[LINK href="http://www.trestlecm.com/"]]http://www.trestlecm.com/[[/LINK]]
Would really appreciate help pin pointing issue causing this and resolving it.
Answers (3)
isp_charlie answers:
try this:
.section_slider_rev_2 .slides li {
height: 350px;
margin-bottom: 0;
margin-left: auto;
margin-right: 0 !important;
margin-top: 0;
overflow: hidden;
}
Viktor Nagornyy comments:
hey charlie, this breaks transition. instead of seamlessly changing between slides this moves next slide below the current slide and then slides up. It does fix the positioning issue. This same effect can be done by removing -100% right margin.
isp_charlie comments:
exactly here man, pls put it to ie9.css on end line.
.section_slider_rev_2 .slider {
overflow: hidden; display: block; position: relative; width: 100%;
}
Viktor Nagornyy comments:
done, not seeing any change. did I added it correctly?
isp_charlie comments:
did you add incorrect, can you add ro style.css on line 1539, it is ok if ie9.css not run.
isp_charlie comments:
hey Viktor Nagornyy, are you tri this, if syill not working, pls give me style.css file, i make sure it work.
<blockquote>did you add incorrect, can you add ro style.css on line 1539, it is ok if ie9.css not run.</blockquote>
Viktor Nagornyy comments:
i've added it, but trying to see if it works. one sec.
Viktor Nagornyy comments:
it brings back transition issue. im leaving it as is, check the site and you'll see it.
isp_charlie comments:
pls remove margin-right:0!important on .section_slider_rev_2 .slider
Viktor Nagornyy comments:
IT'S WORKING!!! I thought this will never go away. Thanks a lot for the help.
Giri answers:
Did you try this?
$('img', 'div.flexslider').on('load', function() {
var $img = $(this),
imgHeight = $img.outerHeight();
$img.parent().height(imgHeight);
});
Source : [[LINK href="http://gabrieleromanato.name/jquery-flexslider-and-ie-89-investigating-a-possible-bug/"]]http://gabrieleromanato.name/jquery-flexslider-and-ie-89-investigating-a-possible-bug/[[/LINK]]
Giri comments:
Ok I found the culprit.
Your IE code looks like this.
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.trestlecm.com/wp-content/themes/skydream/layout/plugins/html5.js"></script>
<link rel="stylesheet" href="http://dev9.celeer.com/wp-content/themes/skydream/ie9.css" type="text/css" media="screen" />
<![endif]-->
This stylesheet
[[LINK href="http://dev9.celeer.com/wp-content/themes/skydream/ie9.css"]]http://dev9.celeer.com/wp-content/themes/skydream/ie9.css[[/LINK]]
has this code
ul.slides li{margin-left:-35% !important;}
Thats the one causes IE issue. Remove it.
Viktor Nagornyy comments:
Thanks Viruthagiri, I have not tried it. If I understand this correctly, I have to modify original flexslider js file?
Viktor Nagornyy comments:
Checking your other suggestion.
Viktor Nagornyy comments:
I completely removed IE9 stylesheet, that was me trying everything I could think of to fix it. The issue still persists.
Giri comments:
Are you sure you remove ie9.css. I can still see it in my browser.
Giri comments:
I think you messed it by removing all ie code. Just remove only this stylesheet
http://dev9.celeer.com/wp-content/themes/skydream/ie9.css
Giri comments:
Or just change only this line
ul.slides li{margin-left:-35% !important;}
like this
ul.slides li{margin-left:0 !important;}
Viktor Nagornyy comments:
I've added it back and made it a 0. Still no change.
Giri comments:
Its working fine now in ie8. What ie version you using?
Viktor Nagornyy comments:
9 and 10 still have that issue for some reason.
Eric P. answers:
You have several HTLM errors on your page. See [[LINK href="http://validator.w3.org/check?uri=http%3A//www.trestlecm.com/"]]http://validator.w3.org/check?uri=http%3A//www.trestlecm.com/[[/LINK]] for a list.
Some are probably not relevant to this problem Some definitely could be.
You have at least one or two stylesheet links outside the <head>...</head> area. That can be handled differently by different browsers. It should be ignored as invalid, but it's possible some browsers will load it anyway.
You have other issues with some of the stylesheet links. One is missing the 'type="text/css"' attribute, and some browser might not recognize that as an attached stylesheet.
You also have duplicate id's in your slider for the items. I'm not saying that's causing the issue, but it could be a problem. It might need to be 'class="slide-li"' instead of 'id="slide-li"'. I haven't looked at all the styling to figure that out.