I positioned links on one image which has 3 buttons, (something like this).
The positioning works with Firefox and Chrom, but with my "favorite" IE(11).. well.. I see the link on the image as an invisible very small character. If I was a user, I wouldn't notice it and think the link isn't working.
I can't publish my real code, but I will change the names in it.
HTML (there is a "lps" class div before this code):
<img src="http://example.ag/nts/images/category/subcat/btns.jpg" style="margin-top: 25px;
margin-bottom: 35px;">
<div class="promotioncontent">
<a class="how modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3>WORK</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/work.jpg">
<a class="openprize opennext" href="#"></a>
</div>
</div>
</div>
<a class="prize modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3> TABLES</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/tables.jpg">
<a class="openfaq opennext" href="#"></a>
</div>
</div>
</div>
<a class="faqs modal_link" href="#"> </a>
<div class="term" style="display: none;">
<div class="termcontent">
<div class="termheader"><h3>FAQs</h3>
</div>
<div class="termtext">
<img src="http://example.ag/nts/images/category/subcat/FAQ.jpg">
</div>
</div>
</div>
</div>
Only the relevant CSS:
.lps a.how {
right: 50%;
margin-right: 189px;
}
.lps a.modal_link {
position: absolute;
bottom: 70px;
display: block;
width: 233px;
height: 76px;
text-decoration: none;
}
What can be the cause of the problem and how can I fix it without ruining it on the Firefox and Chrome browsers?
Answer to accept
Instead of placing invincible elements over sprite image, use background-image as that sprite and just change background-position for each element. That way you can put any size spacing between elements, no matter of spaces between sprite images.
use a different stylesheet for IE support without ruining other browsers layout in head tag
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>
<!--[if gte IE 8]>
<style>
body
{
background:Red;
}
</style>
<![endif]-->
<!--[if gte IE 7]>
<script>
alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
</script>
<p>Thank you for closing the message box.</p>
<![endif]-->
Related
I have an exercise question which is:
Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7
I'm beginning to think this is a trick question as after much googling, the only conditional browser code I can find goes in html like this:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
Although this didn't actually work for me as vis studio just processes this statement as a comment. As far as I can tell it's not possible to write a css snippet to do this, am I right?
I really should not be giving you the answer to a quiz... but
<!--[if IE]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie8">
<![endif]-->
<!--[if IE 9]>
<div class="ie9">
<![endif]-->
<!--[if gte IE 8]>
<div class="ie8plus">
<![endif]-->
<!--[if lt IE 9]>
<div class="ie9lower">
<![endif]-->
<!--[if !IE]> -->
<div class="not-ie">
<!-- <![endif]-->
</div>
I'll leave the CSS rules to you ;)
Use different css files for any version IE
<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->
Now that Internet explorer no longer supports Condition Tags like <![if IE]><![endif]> how do you guys handle custom code only for IE? I need to insert custom CSS that I want to work only for IE. I couldn’t find any simple solution for this.
OPTION 1 - For IE10
<script>
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className+=' ie10';
}
</script>
The CSS to style it:
.ie10 .yourclass {
/* IE10-only styles go here */
}
OPTION 2 - For IE10 (The original suggestion)
Javascript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
HTML:
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
CSS styling would be (if any needed):
html[data-useragent*='MSIE 10.0'] .yourclass {
color: blue;
}
Source: css-tricks
For IE 6 to 9:
<!--[if IE]>
IE<br />
<![endif]-->
<!--[if IE 6]>
IE 6<br />
<![endif]-->
<!--[if IE 7]>
IE 7<br />
<![endif]-->
<!--[if IE 8]>
IE 8<br />
<![endif]-->
<!--[if IE 9]>
IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
Not IE 5-9<br />
<!-- <![endif]-->
With HTML comments, I am trying to do something like the following -
<!-- [if lte IE 8] --> //if browser is IE8 or less display the following
<div>IE8</div>
<!-- [endif] -->
<!-- [if ANY OTHER BROSWER] --> //any other browser do this
<div>Any other browser</div>
<!-- [endif] -->
I can't seem to find a combination that works? How can this be done?
Reference
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if gt IE 7]>
According to the conditional comment this is IE greater than 7<br />
<![endif]-->
For example,
<html>
<head>
<link rel="stylesheet" href="my-styles.css">
<!--[if IE 8]>
<link rel="stylesheet" href="my-ie8-only-styles.css">
<![endif]-->
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Or you could use it to only render certain html markup...
....
<!--[if IE 8]>
<div id="ie8Only">IE8 Only</div>
<![endif]-->
....
I know it's a bit old question, but here's my solution
<!--[if lt IE 9]><!-->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/html5shiv.js"></script>
<!--<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
I am trying to make a website which behave differently on IE browser. I am doing this by calling a different css for IE browser and for another for different browser. But on IE browser IE SPECIFIC css is not being called
<html>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
<head>
<link href="new.css" rel="stylesheet"/>
</head>
<body id="bdy">
<div id="wrapper">
<div id="header">
<div id="logo">
<div id="log_in">
</div>
</div>
</div>
<div id="menu">
</div>
<div id="main">
<div id="left_div">
</div>
<div id="right_div">
<div id="table_items"></div>
<div id="addv"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
If you are targeting IE8 version only then you have to use this conditional statement.
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
If you don't want to create seperate css file then following syntax.
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
For example you have class called borderright and you want to apply different style for ie8 then add your class like below.
.ie8 .borderright
{
/*Your Style goes here*/
}
your code:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
is placed before head tag.
Put that code inside head tag !. And remove if="IE 8" part
I want to know, when using conditional comments, what is the correct way (pay attention to the closing div tags)
This way, with one closing div for both conditional divs
<!--[if IE]>
<div id="IEdiv">
<![endif]-->
<!--[if !IE]><!-->
<div id="AllOtherDiv">
<!--<![endif]-->
<div>The Content</div>
</div>
OR
This way, with a closing div for each conditional div, and repeating the SAME html
<!--[if IE]>
<div id="IEdiv">
<div>The Content</div>
</div>
<![endif]-->
<!--[if !IE]><!-->
<div id="AllOtherDiv">
<!--<![endif]-->
<div>The Content</div>
</div>
NOTE: You might wonder why I don't just use conditional stylesheets if the inner HTML is the same, but I use inline styles on the conditional divs(I have to) and the inline style for IE is different (necessary because IE sucks so bad with it's css support...
)
Thank you
Neither is technically right or wrong, but repeating the contents seems quite a waste if it's going to be the same across browsers. Just conditionalize the start tag as in your first example. HTML comments are designed to allow such a technique.
HTML5 Boilerplate happens to do this with the <html> start tag, by the way, except with classes and slightly different conditional comments, but you can use any attribute you want as long as you target browsers correctly:
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
<!--[if IE]>
<div id="IEdiv">
<![endif]-->
<!--[if !IE]><!-->
<div id="AllOtherDiv">
<!--<![endif]-->
<div>The Content</div>
</div>
is the right way to do it because you see this on many websites:
<!--[if IE9]>
<html class="ie9">
<![endif]-->
<!--[if IE8]>
<html class="ie8">
<![endif]-->
<!--[if lte IE7]>
<html class="ie7">
<![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
content....
</html>