*:first-child+html .clearfix{zoom:1px;}
What does this do? It was turning everything into 1px in Internet Explorer 7. This was in my WordPress theme's style.css (designed by ElegantTheme). What is it suppose to do? I think it's a bug in Internet Explorer that's causing it to render incorrectly.
That gives layout to all .clearfix elements in IE7 using the non-standard zoom property, so that layouts fall together properly where IE7 otherwise wouldn't make them.
The *:first-child + html selector, or simply * + html, exploits IE7's delusion that there's some element that comes before html. It is a hack.
I think the declaration should have read zoom: 1; instead of zoom: 1px;.
Related
I have created a CSS rule that's being applied to a SPAN element residing within a TD element.
The rule is supposed to add content to the span. I'm using the :after selector for doing this.
So far so good. IE8 displays everything correctly. But with my IE10 I don't see the content added to the SPAN element.
Using Internet Explorer Development Tools (F12), I can see that both rules have been disabled by IE10:
What's causing this to happen? Why are these rules disabled? There are no overriding substitution rules defined in the stylesheet to do this.
Your help is appreciated.
Inserted elements are inline by default. Try setting it to inline-block.
I ran into a similar problem today with IE10 with an :after setting for an image. Turns out I had two errors; I didn't have <!DOCTYPE html> at the top of the file, and in Compatibility View Settings the Display intranet sites in Compatibility View option was checked. After I fixed my webpage and unchecked the value the page displayed as expected.
Here is the css I am using:
.foo:after {
content: url(images/foo.png);
position: relative;
top: 2px;
left: 8px;
}
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.
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.
After designing and coding a standards-compliant website, that works functionally in normal browsers (Firefox, Chrome, etc), I now need to make it look identical (or mostly so) in Internet Explorer, down to Internet Explorer 6.
The current version of the website can be found at http://www.adwas.org/test/redesign/, with a minimal version of the problem at http://jsfiddle.net/FdS6L/
The problem I'm having is that at and below the area with the logo, it absolutely breaks down in IE6 (and 7, I'm guessing, still). I've already attempted to fix some of the issues, using the star-hack selector, though it still looks heavily borked. My question is: how do I maintain the size of the header, and get the elements to be (somewhat, if not totally) visible, similar to how it looks in most browsers?
Note:
I'm not adverse to adding JavaScript for the layout to work as necessary in IE6. (applies mostly to the submenu navigation)
I was trying to work on your site, and got it to this point: http://jsfiddle.net/3m367/3/. I basically cleaned up some code and restructured the header, where the bars are full-width automatically rather than forcefully (overflow-x is a CSS3 property, so wouldn't work for older browsers). This displays fine in IE7 and up. However, I stumbled upon an issue with your navigation - IE6 supports :hover pseudo-class on a elements only, so selectors like li:hover wouldn't work. Yet, you cannot put your submenus inside parent menu item's a element because you cannot have links within links. I'm not sure if it's possible to do that drop-down menu in IE6 without using JavaScript. Other than that, the navigation seems to be the only thing messing up in IE6 right now.
Instead of using float: left on #sitenav li you could try:
#sitenav {
display: table;
}
#sitenav ul {
display: table-row;
}
#sitenav li {
display: table-cell;
}
You should also consider using conditional comments to hide a set of IE-only stylesheets from other browsers, especially a stylesheet targeting something as old and archane as IE6. If you don't get anything to work with bare CSS and conditional comments, you should consider trying HTML5 Shiv and do the markup with HTML5 (which I believe you should either way).
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/