Having an issue where internet explorer causes the container of my website to look stretched out:
the url for the site is http://profiledt.co.uk/SetTraining/
I understand that IE8 isn't supported by many sites now but i feel that having the site container fixed would reduce the bounce rating.
Thanks
The reason this is happening is most likely IE falling into quirks mode. IE8 falls down to IE5 quirks mode, which obviously can't be a good thing.
The reason for this is totally invalid HTML you have.
Your document starts with those two lines:
<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
Followed by the <!DOCTYPE html> and the rest. Put those lines in the proper place and validate your HTML using some tool, e.g. this one. (official validator is down for some reason, probably too many people used it)
Try adding the -ms-filter property to your slides.
Example:
<li id="ts-twentytwelve-slide-5272327b9a2a3823180679" class="ts-twentytwelve-slide cycle-slide" style="background-image: url(http://profiledt.co.uk/SetTraining/wp-content/uploads/2013/10/dreamstime_l_26128127.jpg); position: absolute; top: 0px; left: 0px; z-index: 97; display: none; opacity: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://profiledt.co.uk/SetTraining/wp-content/uploads/2013/10/dreamstime_l_26128127.jpg', sizingMethod='scale');-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://profiledt.co.uk/SetTraining/wp-content/uploads/2013/10/dreamstime_l_26128127.jpg', sizingMethod='scale')">
<a href="" class="ts-twentytwelve-link " style="left: 540px; top: 191px">
<div class="ts-twentytwelve-overlay">
<h1 class="ts-twentytwelve-title">Slider too big?</h1>
<p class="ts-twentytwelve-description">Slider too big?</p>
</div>
</a>
</li>
Replace the src for each image individually.
It forces to scale the background image up to its container dimensions.
EDIT
According to your comment you could try this (I've not tested it):
<script type="text/javascript">
$(document).ready(function(){
$('.ts-twentytwelve li').each(function(){
var bg = $(this).css('background-image');
bg = bg.replace('url("','').replace('")','');
$(this).css({
"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"', sizingMethod='scale')",
"-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"', sizingMethod='scale')"
});
});
});
</script>
It loops through each slide and adds the filters with the specific background image.
And as shadow wizard mentioned add a valid doctype to your document (download the header.php and check if the top looks like this:
<?php
/**
* some comments here...
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
Related
could you please tell me where is the mistake. I cant see any text in conditional comments in any browser.
web.html
<!DOCTYPE html>
<html lang="en-US>
<head>
<meta charset="utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<head/>
<body>
<!--[if !IE]>
<p><span class="p-style">XXXXXXXXXXXX</span></p>
<![endif]-->
<!--[if IE]>
<p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>
<![endif]-->
</body>
</html>
style.css
.p-style {
color:red;
}
.p-style-IE {
color:green;
}
Thank you.
Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->
However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
Your code has some problems and I corrected them. Check with IE9 and other browsers. Now its working fine except in IE10 and higher (cuz IE10 and above no longer support conditional tags)
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<head/>
<body>
<p><span class="p-style">XXXXXXXXXXXX</span></p>
<p><span class="p-style-IE">YYYYYYYYYYYYY</span></p>
<!--[if IE]>
<style>
.p-style {color:red;}
.p-style-IE {display: none;}
</style>
<![endif]-->
<!--[if !IE]><!-->
<style>
.p-style {display: none;}
.p-style-IE{color:green;}
</style>
<!--<![endif]-->
</body>
</html>
Update : For IE10 and IE11,
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
we create a media query using -ms-high-contrast, in which you place your IE10+ specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE10+), it will only be parsed in Internet Explorer 10 and greater.
I'm working on a page here is the skeleton inside of the body tag:
<div id="site-nav-container">
<nav id="page-navigation"></nav>
</div>
<header id="site-header"></header>
<div class="content-container clearFix">
<section id="blog-post-sum"></section>
<aside id="site-sidebar"></aside>
</div>
<footer id="site-footer"></footer>
So here is what I am facing: For styling purpose I had to float the section with "blog-post-sum" id to the left and the float the aside with the id "site-sidebar" to the right. To prevent margin collapse I wrapped the section and the aside tag in a div container and gave it a "clearFix" class so that I could use a clear-fix method. The method I used is as follows:
.clearFix:before, .clearFix:after {
content: "";
display: table;
}
.clearFix:after {
clear: both;
}
<!--[if lt IE 8]>
/*For IE < 8(trigger hasLayout)*/
.clearFix {
zoom: 1;
}
<![endif]-->
It works like a charm but the problem is if I try to put this method in the begging of my css file then the styling rules right after the clear Fix method breaks. Just like that! So please help me to find out the solution to solve this problem.
You have invalid comments in your CSS:
<!--[if lt IE 8]>
...
<![endif]-->
This is a comment for an HTML file. It won't work in your CSS file.
You can either move that entire comment chunk into your HTML file (don't recommend) or consider using another way to target less-than ie8 browsers. Here's how boilerplate used to handle this until recently (in your HTML file, replace your <html> tag with this):
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
This adds a class to the HTML tag indicating the browser. Then you can target it in your CSS like this:
.lt-ie8 .clearFix {
zoom: 1;
}
I'm currently running this code. I also have an external stylesheet that applies all my styles of the page correctly but i'm running in this issue at the moment.
When i call .ie9 as a class in my external stylesheet and want to apply a gradient style to it, it isn't running my code in the Internet Explorer emulation.
However when i run the code not in the .ie9 class the code actually works so i made some mistake somewhere. Perhaps you might know what the issue is here.
HTML Code:
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="nl-NL"> <!--![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS Code:
.ie9 {
.section-example{
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80c9db', EndColorStr='#30aac8');
}
}
The problem was actually different. Internet Explorer 11 emulator does not load conditional html statements for some reason.
May it works for greater than ie9:-
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
or
<!--[if lt IE 9]>
<link href="<?php bloginfo( 'template_url' ); ?>/css/ie9.css" rel="stylesheet" type="text/css" />
<![endif]-->
Assuming the following code:
<div class="content">
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<div style="height:42px; align:center;" id="logo">
My goal is to make the div with the background swoosh.jpg be a simple div with class=top
I have tried getting the conditional to work myself, however for some reason (syntax?) it is not working properly.
The following is what I have tried
<div class="content">
<!--[if !IE]>
<div class="top">
<![endif]-->
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
I should mention that I cannot use anything other than inline CSS for this application - and have no access to the header.
I think this is how to do what you want but as previously stated, it's not the best way of doing things if you have other options (tested in IE9 - IE10 doesn't work with conditional statements):
<![if !IE]>
<div class="top">
<![endif]>
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
http://jsfiddle.net/APFZh/2/
IE 10 targeting requires a little JS:
<![if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
This appends a class of “ie10” to the html element but you could write whatever you want to the document
http://www.impressivewebs.com/ie10-css-hacks/
Try adding
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
To the top of your HTML doc. Then use CSS like this
.content {
color:red;
}
.ie6 .content {
color:blue;
}
.ie7 .content {
color:green;
}
This way you can keep all of your CSS in one file and your IE classes next to the non IE classes.
Check out this doc from Paul Irish
It would be better practice to just have the div with class="top" but set different styles for it in a separate IE stylesheet as using inline CSS is not recommended.
Put this in the HEAD of your page:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
As to it not working I'd suggesrt making sure you have a valid DOCTYPE at the top of your page as IE is very fussy about that.
An update if somebody still reaches this page, wondering why the ie targeting doesnt work in recent IE browsers. IE 10 and onward no longer support conditional comments. From the MS official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
If you desperately need to target ie, you can use this jquery code to add a ie class to and then use .ie class in your css to target ie browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
I have a div that isn't lining up correctly in Chrome, IE and FF. Chrome needs a padding-left:40px; while IE and FF do not. I've been playing with if for a few hours and I know I'm missing something simple.
This is what I've been trying:
<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I've also tried in the normal style.css:
<!--[if !IE]-->
#lower .expo {padding-left:40px;}
<!-- <![endif]-->
or
#lower .expo {width:400px; padding-top:40px; float:left;}
I also tried this:
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->
Interestingly if I do this:
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
IE displays correct but not FF or Chrome. Its driving me crazy. I must be missing something simple but I've been looking at it too long.
Just for the sake of your actual error, it lies in how you are doing the comments. It should be:
<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
For a better way than that, here's what I use:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6" lang="en"><![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"><![endif]-->
<!--[if IE 10]> <html class="ie10" lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->
The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.
For example: .ie6 #target-id
For a more in depth explanation, check out Paul Irish's article:
Conditional stylesheets vs CSS hacks? Answer: Neither!
UPDATE:
2012.01.17: Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single
.oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t
fly. Anyway, our current version..
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
Try downloading this javascript file. http://firststepdesign.org/browserselect.js Then link it in your html.
<script src="browserselect.js" type="text/javascript"></script>
After that go to your css and use these to select specific css for different browsers.
only internet explorer will detect this.
.ie .example {
background-color: yellow
}
Only firefox will detect this.
.gecko .example {
background-color: gray
}
Only Safari and Chrome will detect this.
.webkit .example {
background-color: black
}
Hope this helps if you need to more comment.