I'm using this tool to validate a CSS file: http://jigsaw.w3.org/css-validator/
I have 23 errors in my CSS file and more than half look like this:
Line 46 #left_navigation Parse Error ;*width: 175px;
The actual CSS looks like this:
#left_navigation {
float: left;
width: 165px;
*width: 175px;
margin:0px;
padding:12px 5px 5px 5px;
}
The error is due to the asterisk setting the width. I didn't put this here originally, but it's clear that its needed to deal with some display problems in IE.
So my question is: do I care about these errors? Is there another/better way to be doing this? I can't just take it off because bad things happen in IE when we do this.
Do I care about these errors?
I'm not sure. Do you?
There's an alternative though. Make sure your pages have something along these lines:
<!--[if lt IE 7 ]> <html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
Then you can use IEx-specific styles with custom selectors, like such:
.ie7 #left_navigation { width: 175px; }
No need for the *prop: value; hack anymore.
Alternative to the approach above, you could also use the IE-conditionals to include a seperate/additional or alternative IE stylesheet.
If you wanna go for a valid CSS hack,
the following allow you to include a solution without necessity to include the whole modernizr script or changing the HTML (pre-)header by adding IE conditional comments:
* html #left_navigation { width: 175px; } for IE4-6 and
*+html #left_navigation { width: 175px; } for IE7
See http://en.wikipedia.org/wiki/CSS_filter#Star_hack
Any browser will anyway work fine. If it is not for some reason crucial to have validated CSS just ignore it.
Hard solution is to make it work properly on all browsers.Depending on required backward compatibility it might be hard.
There is also something like (Modernizr)[http://modernizr.com/] which could help you with the task with somehting like:
#left_navigation.ie{
/* IE specific code */
}
Althrough Jeoren posted ready solution:)
Related
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.
I've a test.css file with the following styles:
....
#body
{
font-family:Verdana, sans-serif;
font-size:10pt;
margin:0;
padding:0;
}
div#inscreenalertcontainer
{
margin:32px;
padding:16px;
width:100%;
}
....
For IE the attribute width:100%; is necessary in div#inscreenalertcontainer.
For other browsers this attribute is not required.
Is there any way to do this in test.css with some conditional operators?
Since there are around 100 css files, I dont want to create another 100 css files, specific to IE, just to change one property.
Or is it possible to change in JSP itself.
Here is my JSP code:
<body>
<div id="InScreenAlertContainer">
<table class="inScreenAlert">
<tr valign="top">
....
....
</body>
Use Conditional Comments:
<!--[if IE]>
<style>
div#inscreenalertcontainer
{
margin:32px;
padding:16px;
width:100%;
/*plus other IE specific rules*/
}
</style>
<![endif]-->
This is programmed into all versions of Internet Explorer to serve specific instructions for these browsers. No other browser will pick up on it, it's the best way to tell IE to do something else than what's in the original CSS.
If the parameter doesn't hurt the other browsers you can leave it there.
Or use this to apply it to IE only:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
You can choose for the stylesheet hack or conditional comment (html) to target IE and add a
<style>div#inscreenalertcontainer {width:100%}</style>
in your head tags
add this one to your webpage's header section.
and here is a very good link to see more http://www.quirksmode.org/css/condcom.html
<!--[if IE]>
div#inscreenalertcontainer
{
margin:32px;
padding:16px;
width:100%;
}
<![endif]-->
A common way to target IE is to change your html markup to this :
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
And then in your css you can just write :
.ie #inscreenalertcontainer {
width: 100%;
}
This technique will allow you to keep your code readable and tidy.
I have two tables that need to line up side by side. In order to achieve this I have to specify a td height.
In IE the height should be 2.1em. In Mozilla it needs to be 1.76em.
There does not appear to be a
-moz-height:1.76em;
Any idea how I can achieve my goal?
You can put the IE height into a separate stylesheet and load it after the default one, using IE-conditional comments so the other browsers ignore it. Otherwise, you can use jQuery to change the height after it's loaded (if ($.browser.msie))
Yes it is. For Fire Fox do this:
#-moz-document url-prefix() {
//Your css here
#my-id { font-size: 100%; }
}
For IE you can do something like this:
[if IE 8]><link rel="stylesheet" href="DefaultSTyleForIE8.css" type="text/css" media="screen, projection"/><![endif]
This css will only work for IE 8
in mozilla it is possible to change the height for mozilla by height: -moz-calc(470px);
and auto height by height: -moz-available;
I would recommend the html5 boilerplate method,
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
then you can target ie in your css like,
.oldie #myel{
height: 2.1
}
I would shamelessly use IE conditional comments:
<style>
td {
height: 1.76em;
}
</style>
<!-- [if IE]>
<style>
td {
height: 2.1em;
}
<style>
<!endif-->
Here's a list of CSS filters by browser:
http://en.wikipedia.org/wiki/CSS_filter
Browser detect IE using IE's conditional comments and write out separate BODY tags:
<!--[if IE]><body class="ie"><!--<![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->
Then whenever you have a style, you can be more specific by adding the ie class to over-ride only IE:
.mystyle {styles for good browsers}
.ie .mystyle {styles for IE}
I'm looking for a quick way of displaying different css codes using a simple "if statement kind of thing".
At the moment I have been using:
* html #mydiv
For switching things for IE6. But I was wondering if their was anymore little hacks like that for dealing with IE7, IE8 etc.
I don't want to import different stylesheets just switches in the actual .css document itself.
Any help would be great. Thanks!
By the way, conditional comments are cleaner for IE hacking; some CSS hacks make for invalid CSS. This page has a wide range of hacks for different versions of IE: http://www.webdevout.net/css-hacks
Dedicated stylesheets included in conditional comments are the least obtrusive way of doing it (other than dropping IE6 support altogether), anything else is basically a hack. The only reason I can think of for not using them is when you can change the CSS, but not the HTML. In that case, you might want to experiment with media queries, but be prepared for a wild ride (and lots of testing against various browsers).
If you're doing it right, you shouldn't need to provide different rules for IE8.
If your site needs just a few IE6 (are you sure you care?) specific fixes, it's acceptable to just stick a section at the end of your CSS file using the Star HTML hack:
/* IE6 fixes */
* html p { font-size: 5em }
* html #header { margin-left: 100px }
Otherwise, you should really just use conditional comments to import separate stylesheets:
<!--[if IE 7]>
<![endif]-->
This is clean, easy to do, and easy to understand.
Another option that you might like better is the way HTML5 Boilerplate does it:
<!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
Then, you can write inside your single CSS file:
.ie6 #header { color: black }
.ie7 #header { color: red }
.ie8 #header { color: blue }
The worst choice is to scatter all over your stylesheet these types of things:
IE6:
* html p {font-size: 5em; }
IE7:
*+html p { font-size: 5em; }
IE8 (see: http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode):
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
(may also target IE7)
See here for a good summary of different hacks: http://paulirish.com/2009/browser-specific-css-hacks/