So I know that IE8 and below does not like inline-block but I read that inline should result in the same behavior. So I modified copied my main.css to main-ie8below.css and changed all inline-block to inline. I use the following code to try and achieve this:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/media/css/main-ie8below.css" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="/media/css/main.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/media/css/main.css" />
<!--<![endif]-->
However, this is not working. It seems that my if statements are incorrect. Is that the case, or am I missing something else?
Here is the HMTL in question (useless stuff removed):
<nav id="main_nav" role="navigation"><!--
<div><img src="" /></div><!--
--><div><img src="" /></div><!--
--><div><img src="" /></div><!--
--><div><img src="" /></div><!--
-->
Here is a fiddle, except without images:
http://jsfiddle.net/bqXsU/
You need to use this way:
display: inline;
zoom: 1;
I guess you missed the zoom: 1 part. And if you are coupling with the existing stylesheet, which goes for all the IE versions and modern browsers, it is good to use this way:
display: inline-block;
*display: inline;
*zoom: 1;
But the problem is that, your CSS might not validate.
I don't understand, which part is the one you didn't understand. Let me explain the three things I used.
Star Hack: Prepending a * in front of the style rule, will make it only visible to IE 7 and below.
Validation Issue: The rules *zoom and *display are not valid CSS properties.
How does this work? In IE 7 and below, this zoom: 1; will trigger the hasLayout property of the element, thereby making it available the width, height, margin and padding.
It turned out to be the fault of HTML5 elements not being recognized by IE8. By adding HTML5shiv I was able to fix it.
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;
}
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]-->
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 these HTML conditional codes for IE 7 yet they don't appear to be working.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/stylesie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
is there something wrong with them or something I am missing?
If you adjust your rules for IE7 in stylesie.css, then it should be loaded after your original css file:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/stylesie.css" />
<![endif]-->
Rules for a selector with the same specificity will overwrite old ones, so IE7 will parse stylesie.css first and overwrite those rules with the ones from styles.css.
Basic example of this behavior:
div, div.red{
color:red;
}
div{
color:blue;
}
This will result in a blue color in all <div>, except the one tagged with the class red.
From the given information I can only try to guess: for me it looks that "/css/styles.css" overwrites some CSS properties of "/css/stylesie.css" since included after. So I'd try to include it before:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/stylesie.css" />
<![endif]-->
I guess the position you inserted it is the issue. Your page first loads IE-definitions, then adds your CSS supposed to be the "default" one for all browsers. Now if there are definitions for the same elements like in your IE-Version, that will simply override those.