Are there valid hacks in IE6 and 7 for W3C compatibility?
I believe there are W3C incompatibilities when using hacks. For example, using the following CSS code (as suggested under option 2 in this article: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer?cp=1):
.box {
height:200px;
_height:200px;
}
gave me the following error in the W3C CSS validator:
Property _height doesn't exist : 200px 200px
If I'm wrong please advise.
Thank you.
This alternative hack should do it:
/* Both of the following will be used by IE only. */
* html .box{height:200px;} /* IE6 only */
*+html .box{height:200px;} /* IE7 only */
Options 1 and 3 in that article — i.e. HTML conditional comments — are the way to go. They don’t trip up the HTML validator, and they’re explicit — they say “use this code for this version of IE”.
You can use them to apply different stylesheets that only fix Internet Explorer bugs. This keeps your IE bug workarounds separate, so that when, for example, the IE6 countdown reaches zero, you can remove your IE 6-specific CSS without affecting anything else.
Related
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!
I have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the > selector, so the references to body>div#bwrap won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap, this implies that the bits inside the body>div#bwrap are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute, whereas all other browsers would position it fixed. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap selector and remove the body>div#bwrap one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching > selector, which you need to treat in the same way as the first example, although the margin-left is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
The voice-family part is, as mentioned, a really old hack and should be removed
If you're explicitly not supporting IE6 you may not need the child selector ">" at all
Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
#bwrap { ... all browsers - including ie6 ... }
html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}
I've run into a weird quirk. The website I'm building for Escondido Arts Gallery has all of it's text in each element left-aligned in firefox and IE, but for some reason everything is center aligned in Safari. Is there one simple css or html fix I can do to fix this, or am I going to have to 'text-align: left' every element?
No surprise there:
<body tracingsrc="../../non assets/web2.jpg" tracingopacity="30" align="center">
Just get rid of the proprietary attributes (align="center" especially), and your problem is solved.
There is something wrong with the CSS (or there's an unclosed html tag). The center align property must be cascading from some other element because it's not only safari/chrome (which also uses webkit) but also opera that shows the things center aligned, and both safari/chrome and opera are more standards compliant than ie and even firefox.
* { text-align: left; }
If things are cascading properly this should conceptually be enough:
html, body { text-align: left; }
Depends on why it is left-aligned. If it's simply the browsers applying different defaults, you can do as greyfade says to make all tags default to left-align in all browsers.
If the problem is bugs in the browsers CSS implementations, then you may have to trace down why the browsers disagree, and find some workaround to that.
Specifying a strict rather than transitional doctype may also help in getting more uniform behavior from the browsers (and let's be honest here, can we really claim to still be "transitioning" to HTML4.01 or XHTML1.0? Both standards have been out for close to a decade.)
I already know: "Don't use css expressions!" My question is not about whether I should be using an expression or if there is an alternative; my question is simply: Can I get a css expression to only be evaluated in versions of IE prior to version 7 without using conditional comments?
I occasionally use an underscore hack to hide a rule from IE7 but IE7 seems to evaluate expressions anyway. For example, _width:700px; is ignored by IE7 but _width:expression('700px'); is still evaluated.
I know that someone will try to tell me to just use a conditional comment to include the rule, but I am looking for a way to do this without placing a single style rule into a separate file.
A note for those of you who still don't want to let it go: I've chosen to use a css expression, but I didn't do so lightly. I understand the implications and I am using an expression that only evaluates once. Stop worrying about my bad decisions and just answer the question already... ;-)
I always use the star "hack" to target IE6 specifically, but it does require your browser to be in standards compliant mode (see below).
/* IE6 only */
* html .myClass {
width: 500px;
}
I like it because it doesn't rely on parsing inconsistencies in browsers and it validates according to W3C.
As for being in standards compliant mode, you should always add a valid DOCTYPE to your pages as it results in fewer CSS bugs and browser idiosyncrasies. For an explanation of quirksmode and standards compliant mode, check out this article.
You can use this example below to play around with expressions in each browser. I tested it in FF, IE6, and IE7 and it worked as expected. I only wish that SO had syntax highlighting to recognize CSS expressions and mark them as red so you can be reminded that they are evil. Might I ask why you are deciding to use CSS expressions in the first place? A lot of people try to use them to achieve min-width in IE6 but that's not the right solution. If that's the problem you're trying to solve, I've written up an answer in a separate question demonstrating a valid CSS solution for min-width in IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.ie6 {
display: none;
}
* html .ie6 {
display: expression("block");
}
* html .ie7 {
display: expression("none");
}
</style>
</head>
<body>
<div class="ie6">
This is IE6
</div>
<div class="ie7">
This is Firefox or IE7+
</div>
</body>
</html>
You don't have to use conditional comments to add a new file. You could easily add a conditional comment to add a class to the body tag, as follows:
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gt IE 7]>-->
<body>
<!--<![endif]-->
Then in your CSS you can simply define a different style for IE7 on any element you like:
#content {
width:720px;
}
.ie7 #content {
width:700px;
}
You still load the same stylesheet, but you can style elements based on their browser.
You could even extend this to have differnt styles for IE6, 7 and non-IE browsers.
You can try Rafael Lima's CSS Selector. It uses Javascript, but you can do things like:
.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}
I used to use !important to make non-ie browsers use a different style but then IE7 started supporting it. What I have found is that IE7 will apply a style marked !ie-only (or anything not !important) and other browsers will ignore the style as they don't recognise that.
If you need three different styles this might work but not great is you want to adhere to standards though. (normally I don't try the mix of !important and !ie-only and just have !ie-only.)
#myDiv {
height: 3.0em !important; /* non-ie */
height: 2.6em !ie-only; /* ie7 */
height: 2.4em; /* ie < 7 */
}
This answer may be what you are looking for:
In-line CSS IE hack