I am trying to create a custom Facebook Tab using iframes. Anyways, it has a popup when it first loads. However, this popup doesn't display correctly when shown in Internet Explorer.
I tried the below code so I could attempt to hind the popup altogether, but it didn't work.
<!--[if !IE]>
-->
#hidepopup {
display: none;
}
<!--
<![endif]-->
With the popup code between <div id="hidepopup"> & </div>
Any suggestions on how to hide or resize it?
http://www.facebook.com/pages/GTD/104839016256119?sk=app_168848466497060
There are a few things going on here.
The conditional used is a IE conditional directive specifying: if not IE, these are IE only so it is a bit backwards
The conditional is incomplete the end comment happens immediately after the first condition.
Try This:
<!--[if IE]>
<style type="text/css">
#hidepopup {
display: none;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#hidepopup {
display: none;
}
</style>
<![endif]-->
Do not use ! because it means not IE and you have extra opening/closing tags for comments. Also you have not declared that it is style. Here is link to help you with conditional comments: http://www.quirksmode.org/css/condcom.html
Your second issue is that you are using jQuery for animating popup. Animations are changing display:none to display: block. So your special condition for IE is overwritten by script.
here:
//transition effect
$(id).fadeIn(2000);
Related
I am working on branding SP2013 and everything is working except for IE9 support the gradient. I tried adding in,
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
but it did not fix the issue and SP2013 dev console did not like the syntax. Is there a way to do this or should I just do it via an image tag?
CSS gradients were added in IE 10. Can I use...
If you want to do this using CSS-only, you'll need to use a filter for <= IE 9.
I want to show big text only in Ie9. I have a lot of div and span used in my page. I can't write for every div a css line.
I want to write a single css to applied on whole page. I want to applied it on IE9 only.
*{
font-size:120%;
}
I agree with Ben Lee, this is something you should do with a conditional statement.
<!--[if IE 9]>
<style type="text/css">
*{
font-size:120%;
}
</style>
<![endif]-->
is there a way to add a css which will work only for IE8 in compatibility mode, but will not if IE7 or IE8 or (obviously any other browser) ???
My CSS is trivial
h1 {
font-size:14px;
}
but that must font-size must only work on IE8 (compatibility mode)
NOTE:
I know how to write a conditional statement to spot IE8... but I don't know how to do it for IE8 compatibility mode.
CSS hack for IE8, like this:
h1{font-size:14px\0;}
Unfortunately there is no way to apply to just IE8 Compatibility mode. However, IE8CM will display exactly the same IE7, because it is an IE7 emulator. You could use something like the following code, but it will also apply to IE7:
<!--IE9 compatibility mode & IE8:-->
<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
<!--IE8 compatibility mode & IE7:-->
<!--[if IE 7]>
<p>Welcome to Internet Explorer 7.</p>
<![endif]-->
Is there any reason that it can't also apply to IE7? Any hack that you're doing that would fix a problem compatibility mode in IE8 should also be needed in IE7.
You should add code below before html tag in your code:
<!--if IE 8>
<html class="IE8">
<[endif]-->
<html>
...
</html>
and in CSS file, do this:
.IE8 h1{
font-size:14px;
}
This will work only for IE8.
use css hack :
body{
color:red; /*every browser*/
color:blue\9; /*IE8 or below*/
}
Compatibility mode unless there is a modified DocType renders as IE 7 or less, so if it is in compatibility mode, it will often render also in IE 7.
However, you can still do it: if you check the user agent string, you can differentiate it that way. IE 8 and newer include the word 'Trident' in the user agent string, so if it is rendering as IE 7 or less, but the word Trident does show up in the uagent, then it must be in compatibility mode.
While most people would not find this necessary, I did have reason for it. In one of my previous projects, it was needed to tell people to use the compatibility mode option until we were able to modify our applications to handle the newer browsers. Not everyone reads instructions, so a message that pops up is often the best way to tell people what to do.
This modified version of a script I wrote and put in the head of the document did the trick:
<script language="javascript" type="text/javascript">
if (!!navigator.userAgent.match(/MSIE/i)) {
ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':''; }
</script>
So then the javascript variable ie_mode would be set to either: "ie_compatibility_mode" or "not_ie_compatibility_mode"
If you were to add document.documentElement.className+=ie__mode; to the script so as to add a css class to the document itself like so:
<script language="javascript" type="text/javascript">
if (!!navigator.userAgent.match(/MSIE/i)) {
ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; }
</script>
Then you would be able to use css in the document for either mode. Example styles:
<style type="text/css">
html { color:#000000; }
/* default settings: start with all items 'off' */
.hide_element { display:none; visibility:hidden; }
.ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }
.not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#666666; }
</style>
and in the body you could then do this:
<body>
If you are using internet explorer there will be more here:
<br><br>
<script language="javascript" type="text/javascript">
if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>
<br><br>
<div class="hide_element display_compatibility_mode">
This is in compatibility mode. [this should show up in orange]
</div>
<div class="hide_element display_not_compatibility_mode">
This is not in compatibility mode. [this should be show up in blue]
</div>
</body>
Here is the complete working page with all the parts put together:
<!DOCTYPE html>
<html>
<head>
<title>HTML Class Setting / Detect Compatibility Mode Example - Jeff Clayton</title>
<script language="javascript" type="text/javascript">
if (!!navigator.userAgent.match(/MSIE/i)) {
ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; }
</script>
<style type="text/css">
/* default settings: start with all items 'off' */
.hide_element { display:none; visibility:hidden; }
.ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }
.not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#0000FF; }
</style>
</head>
<body>
If you are using internet explorer there will be more here:
<br><br>
<script language="javascript" type="text/javascript">
if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>
<br><br>
<div class="hide_element display_compatibility_mode">
This is in compatibility mode. [this should show up in orange]
</div>
<div class="hide_element display_not_compatibility_mode">
This is not in compatibility mode. [this should show up in blue]
</div>
</body>
</html>
Can we use like this <body class="all" <!--[if IE 7]>class="ie"<![endif]--> >?
I want to keep all CSS in one file.
You could use:
<body class="all">
<!--[if ie]>
<div class="ieOnly">
<![endif]-->
<div id="content">
<p>...</p>
</div>
<!--[if ie]>
</div>
<![endif]-->
</body>
That way the css selector to address IE's flaws/differences is more specific than the normal
#content {/* for non-IE browsers */}
body.all .ieOnly #content {/* for IE */}
...and should override the 'normal' #content rules and will never be applied by non-IE browsers, since there's an element .ieOnly in the selector which is otherwise 'invisible' to them.
Still, strictly speaking, no; you can't do what you propose in your question, though there are alternative approaches.
Short answer: No (at least, not in-line), but why do you need to? :)
Just defined a body { } style in an IE conditional stylesheet, like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And inside there:
body { /* or body.all { */
background: pink; /* Pink is pretty!, or green, whatever */
}
No, you cant specifically comment out an attribute even with IE's conditional comments. But there could be other ways of expressing it.
If you want to add a class to body based on the browser without hacks, you're gonna need to use server-side code and UA sniffing.
i have a problem in display:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....
You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:
<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />
<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
<link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
<link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
Here is a good overview of CSS browser hacks:
http://brainfart.com.ua/post/css-hacks-overview/
I guess section 4, 8 or 9 could apply for your case.
IE7 and below doesn't support inline-block. But there's a simple workaround. As an inline-block is - simply put - an element that behaves like a block but aligns as inline, you only need to tell IE it's an inline element with a layout (a IE idiossincracy). So:
.el { display:inline-block; *display:inline; *zoom:1; }
There you have it! Really simple. You may as well use conditional comments and avoid the star hack. I personally use Paul Irish's HTML declaration (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) and then I target specifically IE7 and below using:
.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }
The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.
I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.