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.
Related
I have the following setting and only want to have this setting for IE only.
Is there the way to do so
.login-space {
padding-right: 30px;margin-right: 20px;
}
Thanks
K
One solution is create a style sheet for only IE and put that selector in it and add the style sheet in head section like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
More detail Here
How can I have CSS conditions based on the browser?
Just for example if the browser is IE:
div{
[if IE ] background-color: yellow;
}
Thanks
I found this page useful for selecting/isolating different browsers (http://browserhacks.com/)
CSS is limited as it is not a programming language (it's a markup language)
If you are using a CSS preprocessing language like sass-lang, scss or less, you can get around that when you are in development. SASS Lang - CSS Preprocessing.
However, in your case, the condition is according to the browser type, (specifically IE).
Now there are some work arounds, such as Conditional Stylesheets [mentioned here CSS Tricks Conditional Stylesheets], or browser detection with javascript (on the front end, but this is considered bad practice).
The Caveat of Conditional Stylesheets is that it is applicable for IE 9 and under (the compatibility was removed for IE10)
Another thing you should also consider is whether you want to provide conditional stylesheets from your backend (and based on your request header, you can determine the browser type).
Syntax for conditional CSS:
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
OR you can create two different css files one for IE specific and other one is common for other browsers.
If browser is not IE 6:
<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
If browser is greater than IE 7:
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
If browser is less than IE 6:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
For example
#div {
_height: 300px;
}
What versions of IE will take this?
The underscore hack will only work in IE6. There was a variation of it that worked in IE7:
#div {
*height: 300px;
}
But neither of these are recommended as they produce invalid CSS. It would probably be a far better idea to have separate CSS files and include them conditionally for different browsers:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
For more information on conditional comments, see this article.
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);
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.