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
Related
i have tried a very simple code, dont know why it is not working , may be a small mistake but i gave up, so please help
my ie version is 8.
here is my code
<!DOCTYPE html>
<head>
<!--[if gte IE 8]>
<link type="text/css" rel="stylesheet" href="ie.css" />
<![endif]-->
</head>
<body>
<div class="u">
xyz
</div>
<style scoped>
.u{
background:red;
}
</style>
</body>
</html>
ie.css
.u{background:green;}
The issue here is that you are redeclaring your css.
In the above code, you are specifying:
For ie: set background green.
For all: set background red.
Place your ie css below the generic css for it to take precedence.
You should do it like this:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You might need to apply the !important attribute to your over-riding class definition like this:
.u{background:green!important;}
This will force it to take precedence over the normal version. A better solution might be to make it more specific too so that it is used when present (when being viewed in IE9+):
body div.u{background:green;}
I'm working with responsive website. I've used media queries for making that responsible. Basically, I haven't used any fixed width. I've used percentage as a width of every div.
So that the website can be scaled proportionally according to resizing of browser. For using percentage of wide may be caused problem for older ie. As ie prior to ie 9 don't support media query, so, I want to build the non-scalable version for those ie. As I gave only few code for bringing scalability, so is it okay if I write the CSS code at my main stylesheet under/at anywhere with my default CSS?
Like at style.css:
#info {
width: 13.672%;
/*if ie9 and lower
width: 175px;*/
height: 830px;
/*if ie9 and lower
margin-right: 40px;*/
margin-right: 3.125%;
float: left;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
max-width: 100%;
/*if ie9 and lower
max-width: inherit*/
height: auto;
/*if ie9 and lower
height: inherit*/
}
I want to write that format. But, I don't know the correct format. Please, tell me the correct format.
Another question to you. As those version of ie don't support the media-query, so the meta tag
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="kt_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="kt_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:1024px)" href="kt_medium.css" />
with tablet.css, mobile.css don't create any problems for those older version ie, isn't it? I mean I want to write IE special css only at my main stylesheet (KT2012.css). Should I write every IE special css at every stylesheet like at mobile.css, tablet.css etc? If that devised based css file don't support at older ie, so, I don't do any things with that device/viewport based stylesheet if I make non-scalable version for ie, isn't it?
I'd recommend the approach taken by the HTML5 boilerplate, outlined here by Paul Irish. Basically, set up your document like this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
You now have classes in place to accurately target only certain versions of IE. Your css will look like this:
.element { margin-bottom: 20px; }
.lt-ie9 .element { margin-bottom: 10px; }
You then avoid CSS hacks, and can keep everything in a single stylesheet.
One way to do this is with Conditional Comments.
IE <= 9 (is the only browser vendor that) supports them, which you can use to specifically target any version(s) of IE. For example
<!--[if IE 9]>
Special instructions for IE 9 here, for example load a specific CSS file to override rules only for IE 9
<![endif]-->
IE 10 has dropped support for them though.
More recently the HTML5 boilerplate introduced a class based approach to avoid the multiple stylesheets (i.e. HTTP calls) issue and fragmented CSS rules that conditional comments tends to create.
Client.css hosted on another server.
td { background: none transparent scroll repeat 0% 0%; }
Can I override this for IE7?
I’m trying to remove the background property on this element. The background forces everything in IE7 to be invisible on <tr> and <td> elements, as I don't think it allows this in IE7.
For IE7 only
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/client.css" />
<![endif]-->
For IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/client.css" />
<![endif]-->
Sure. You can use the !important rule, and conditional stylesheets:
In your <head>, add:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And then inside ie7.css, simply create the following CSS rule:
td { background: #fff !important; }
In my stylesheet I can override the specific client style be defining the particular class and then the td which will override the clients style.
<link type="text/css" rel="stylesheet" href="http://domain.com/client.css"/>
<link type="text/css" rel="stylesheet" href="mystyles.css"/>
inside my linked stylesheet
.class > td { background: #fff; }
Why I am not able to apply an css that is for IE browser only,
I am trying to do it as below with in-page css block.
<style type="text/css">
<!--[if IE]>
body a {font-size:12px;text-decoration:none;}
<![endif]-->
<style>
Reference link
The way to do it is around a css file reference,
Example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You might be able to do this too:
<!--[if IE]>
<style type="text/css">
body a {font-size:12px;text-decoration:none;}
<style>
<![endif]-->
But it has to be in the html page and not in a css file.
because conditional comments can't be in the style tag. Everything within <style> must be css. Try to wrap the style tag with the conditional comment.
Your code: http://jsbin.com/otidal/edit#preview
Correct code: http://jsbin.com/otidal/2/edit#preview
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.