In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
Related
.pageWidth
{
margin: 0 30px;
min-width: 940px;
_width: 976px;
_margin: 0 auto;
}
I saw this from a website css file. My question is: what is the difference between width/margin and _width/_margin? why use _width/_margin here?
It is a hack for IE6. The CSS rules _margin and _width will only apply for that browser. There are more curious hacks for the IE browser like:
width: 940px\9; /* IE8 and below */
*width : 960px; /* IE7 and below */
If you make a fast search in google for "IE CSS hacks" you can find more information and tricks for CSS rules in the evil IE like: Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
the _ and - before the properties is for compliance to Internet Explorer 6 and below. Here is the article for your reference:
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
*Prefixing a regular property name with _ or - will cause the property
to be applied to Internet Explorer 6 and below but generally not in other browsers.*
It's an old CSS hack used to target Internet Explorer.
IE tries to be smart and does some additional parsing over the CSS properties one of which is stripping the underscores.
So in you case IE will override the width to 976px and for the rest of the browsers the width will stay 940px. This was used in the past to fix a problem with the IE broken box model, which didn't follow the W3C conventions.
I'm trying to have our Wordpress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8's lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.
URL: http://trekcore.com/blog
The CSS controlling that separation is here:
#secondary {
float:right;
width:300px;
margin-right:-320px;
}
Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!
you should validate your html markups, 35 Errors and 11 warnings wont help.
in the meanwhile, try this fix :
.negative-margin-element {
zoom: 1; /* ie hax*/
position: relative; /* ie forced behavious*/
}
You are using HTML5 elements and IE8 does not understand them and will ignore them and you can't apply CSS to them because IE8 won't know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8's DOM tree and set them to block level.
You can write your own code and CSS to do the same thing but the shiv is convenient.
I know how to target IE, but that's only in HTML (which means I need to create another CSS file for IE bugs). Is their anyway, how I can implement the fixes in the same CSS file. This mean I target IE with CSS code?
You can do with these hacks
For example:
selector {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
There is no equivalent to conditional comments/code in CSS. The only thing you could do there are the old CSS hacks -- that people struggled with before conditional comments became known.
You can make CSS hacks work, for a bit, but it's not a smart or robust approach.
Recommended approach:
Always start with a CSS reset. Here's a good one: http://meyerweb.com/eric/tools/css/reset/reset.css
If at all possible, get your boss or client to realize that IE6 support is not cost-effective.
Design HTML and CSS with an eye for IE bugs, as much as possible. EG, float-problems, height and margin problems, etc.
For those few things that still need different CSS in IE, putting them in a conditionally-included, separate CSS file really is the simplest, most robust approach. The bonus is it doesn't penalize decent browsers one bit.
In your CSS code, precede your selectors with something that only IE will recognize. Examples of selecting <div> elements in IE6 and IE7:
IE6 only: * html div
IE7 only *:first-child+html div
A comprehensive list can be found here: http://paulirish.com/2009/browser-specific-css-hacks/
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }
For IE 6 we have plenty of bugs to bug us as a designer.
incorrect box model etc etc.
i have searched for fixes via JavaScript and found
[link text][1]
IE7.js
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
but do we have real life saver other than javascript via css.
Ways to deal with IE6 bugs with CSS? Sure.
See: http://www.quirksmode.org/css/condcom.html
for conditional comments
There are other ways, such as adding some specific characters in some CSS properties that get ignored in some browsers but not in others.
However, in some cases, web designers should be very cautious when using these.
The alternative is to live within the IE 6 world of bugs and design your pages to look right despite them. You can serve up different css for your IE6 clients, or even different html if necessary, depending on your design. In some cases, you can use one CSS file that will mean different things to IE6 clients, but that technique is problematic with respect to IE7 and 8.
this link is also handy one
How do you deal with Internet Explorer?
I never knew this - thanks svinto
"IE6 doesn't have the incorrect box model unless you have the wrong doctype. – svinto"
There are some simple stylesheet hacks that can modify the presentation in various internet explorer versions to solve your CSS problems. For example these three:
Simplified box model hack for IE4, IE5, IE5.5:
div.values { margin: 10px; m\argin: 20px; }
star html hack for IE4, IE5, IE5.5 and IE6:
* html div.values { margin: 5px; }
star first-child+html hack for IE7:
*:first-child+html div.values { margin: 5px; }
PNG transparancy issues could be solved with solutions like this:
<div style="width:50px;height:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo/logo.png');">
<img src="/images/logo/logo.png" height="50" width="50" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" />
</div>
Great info so far but one thing to note is that IE7.js doesn't fix pngs in all cases (at least last I looked). For instance, you won't be able to tile a background image with transparency.
In the case of DXImageTransform you may find that when this is applied to elements that contain links, those links are no longer 'clickable'. You can sometimes fix this by giving the parent element that has the transform applied to it static positioning and to position the child anchor element e.g.,
h2{
position:static;
zoom:1;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/mypng.png", sizingMethod="scale");
}
h2 a{
position:relative;
}
<h2><a href="" >a link!</a></h2>
If you have to do this sort of garbage put it in a separate stylesheet and control loading with conditional comments. If the design is of any complexity try you best not to support ie6 or <. If you can't avoid doing it, charge more ;). Sometimes that is enough to persuade someone that supporting ie6 isn't "worth their while".
why don't you try FireBug Light for IE? It's not as powerful as FireFox FireBug but can be helpful
Many bugs can be worked around in CSS using conditional comments or CSS selector hacks. But there are some bugs that CSS hacks alone cannot handle such as IE6's .multiple.class.selector.bug
There's another quick and dirty hack for IE6 styles
for e.g.
You can define the CSS as;
.divTitle
{
padding: 5px;
width: 600px;
_width: 590px;
}
All the other browsers picks up 600px as the width value & IE6 overwrites it & take 590px;
I've tested this in IE7 & FF as well.
Also you may want to check this link;
link text