<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/
Related
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/
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]-->
I have following css selector
body
{
margin: 0;
font-family: "Arial" ;
font-size: 18px;
line-height: 25px;
}
I want to write condition that if the browser is IE then change the line-height to 10px
I searched one similar question here but when i add the condition like mentioned in the question
it throws syntax error Missing property name before colon(:). I followed question and modified code like
.bodyClass
{
margin: 0;
font-family: "Arial";
font-size: 18px;
line-height: 25px;
<!--[if IE 6]>
line-height: 10px;
<![endif]-->
}
How to write the conditional statement inside css selector? I dont want to create different style sheets for IE and rest of browsers
If you don't want to create separate stylesheets then you have two alternatives.
IE conditional comments
Use conditional comments to give classes to the <html> tag, for example:
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
This way you can then use nice self-describing selectors like this in your CSS:
html.ie6 .bodyClass { line-height: 10px}
CSS hacks
Another option is to use appropriate CSS hacks to target the browsers you are interested in. The advantage of this approach is that it can be done without touching the HTML/DOM at all. One specific hack that targets only IE 6 while still being syntactically valid CSS is:
.bodyClass { _line-height: 10px; /* hack targeting IE 6 only */ }
If you do decide to use CSS hacks, please make sure to accompany them with comments that describe what they do to help future maintainers.
Try this out:
*line-height:10px; //* is hack for IE7
line-height:10px\0/; //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers
#media screen and (-webkit-min-device-pixel-ratio:0)
{
line-height:10px;
}
You can write them inside headers and there join a stylesheet such as
<!--[if IE 6]>
<link href="~/folder/file.css" rel="stylesheet" type="text/css" />
<![endif]-->
Else if you can use a serverside such as ASP.NET and by Using Request.Browser check whether if its IE and change the style.
Try <!--[if lte IE 6]>
Or you could try the opposite and add the line height as 10 then use
<!--[if !IE]>-->
do something; IE will ignore this, other browsers parse it
<!--<![endif]-->
to set the line height for other browsers.
Below is a link to Supporting IE with CSS
http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/
Another Useful site is http://css3please.com/ which shows you the different CSS for IE, Chrome and Firefox. It also allows you to edit the site in real time.
#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;
}
Demo Fiddle
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.
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.