I have different css styles made for internet explorer to show website properly.
I tried to add tried to add numerous codes into wordpress header php before it worked in Internet Explorer But the problem is that the additional style is read by all browsers, so if the style works in IE, the same stlye works on all browsers.
Is there any way to use one style.css and only set this entry for internet explorer:
#header .menu li {
float: left;
margin-left: 40px;
}
If I put that to the header.php
<![if !IE]>
<style> #header .menu li {
float: left;
margin-left: 40px;
}
</style>
<![endif]>
It overrides additional style.css, so it means that Chrome also obeys this parameters. My site url is virmodrosti.com
Let me know what to do, thank you.
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Resource :https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Related
<form:form...>
<DIV class="outer-left-bm">Location: </DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Name: </DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>
</form:form>
DIV.outer-left-bm {
width:49%;
display: inline-block;
min-height: 0;
border: 1px;
text-align: right;
margin-bottom: 8px;
}
DIV.outer-right-bm {
width: 50%;
display: inline-block;
min-height: 0;
border: 1px;
text-align: left;
margin-bottom: 8px;
}
I have a property like above defined in CSS file and used in HTML/jsp.
Here, i want to use the display property as inline or inline-block based on the users browser.
if IE(5-7) 'display: inline;' else 'display: inline-block;'
I want to do the conditional code in css rather than controlling them in html.
Perhaps you can use conditional logic in your HTML to include browser specific CSS files.
Example:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/my/style/sheet/style.css">
<![endif]-->
Unfortunately there is no conditional logic for browsers in standard CSS3.
You can also checkout html5shiv and Modernisr to help deal with old browsers/IE
The vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) are used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.
This allows properties to be set browser specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for.
Below are the references:
1) WebKit extensions
2) Mozilla CSS Extensions
You can use conditional logic in your specific CSS files.
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
For More Info: You can see this url https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I have this class in CSS and i need to change it when its IE. I want to remove padding-bottom. How can I do that?
I don't want to add another CSS file, I want to change only one property in one class.
.container-wrapp{
float: left;
position: relative;
width: 100%;
padding-bottom:100px;
height: 100%;
}
I tried this but without success:
<!--[if IE]>
<style type="text/css">
.container-wrapp{
float: left;
position: relative;
width: 100%;
height: 100%;
}
</style>
<![endif]-->
For IE10+ you can do the following:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-wrapp{padding-bottom:0;}
}
Demo Fiddle (Note that the text is red only in IE 10+)
#media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.red {
color: red
}
}
<div class="red">text</div>
NB: Using hacks like these are generally frowned upon. Use with caution.
Create a stylesheet file ie.css and use if AFTER the global style definition this way:
<!--[if IE]>
<link rel='stylesheet' type='text/css' href='ie.css'/>
<![endif]-->
This should work.
I think for best practice you should write IE conditional statement inside the tag that inside has a link to your special ie specific style sheet. This HAS TO BE after your custom css link so it overrides the css property. Here is an example:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Hope this will helps you!
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.
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");
}
Checkout this link How to create an ie only stylesheet , You need to create a separate style sheet for IE.
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.
In a CSS file, is there a way to give a specific height for a DIV that only applies to Internet Explorer ONLY, and at the same time, give that same DIV another height that applies to all browsers except for Internet Explorer?
You can create an IE-specific stylesheet and use IE Conditional statements.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
This way, you basically have two stylesheets; one for IE and other for rest of the standard-compliant browsers.
Hacks could have been used such as:
_height:500px;
*height:500px;
But that is not recommended.
See Also:
How To Create an IE-Only Stylesheet
I have used the following and it worked in IE8. Put the following code within tag.
You can watch the online version from here, http://nazmulweb.com/site5/demo/iecss/
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 1px solid green;
}
</style>
<!--[if IE]>
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 5px solid red;
}
</style>
<![endif]-->
try this
<style>
#mydiv { height:800px; }
</style>
<!--[if IE]>
<style>
#mydiv { height:500px; }
</style>
<![endif]-->
Create 2 css files, one for IE and one for the other browsers
Load the css file according to the browser like described here