As I want to use flex-box I need a fallback and I like to make fallbacks as simple as possible.
I just use 2 displayproperies as described here: http://maddesigns.de/flexbox-fallbacks-2670.html
.the-flextable {
display: table; /* Fallback IE<9 */
display: flex;
width: 100%;
}
To test it I have only an IE11 and use the Emulation to set it back to IE9.
With this test scenario this simple fallback does not work. the emulated IE9 still takes the display: flex property, but then does not display anything.
In a real IE9 the fallback does work!
Now I wonder why it takes the display: flex. Is it bacause it is still an IE11 that would take that property, but the IE9 emulation cant rendet it then?
Choosing Document Mode: IE9 should be enough. Even though the DOM Explorer shows IE as trying to do display: flex, it won't render that properly and the fallback rule should take effect.
Related
The webpage is http://www.parentcenterhub.org/region6-aboutus/ It is displaying correctly on all browsers except IE9. The CSS is:
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
The conditional css for ie 7 and ie 8 is:
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
There is no conditional css file for IE9. So, please suggest the code which I can put in style.css so that the page also displays correctly for IE9. Please help.
IE9 and doesn't support flexbox (see here for full browser support details), so you'll need to use something like your IE7/8 alternative layout for IE9.
You can work without having a conditional CSS for IE9 in one of several ways:
Use CSS's override mechanisms. Simply specify display:inline-block above display:flex (etc) inside the same selector, and every browser will pick the last defined option that they support. So if flex is below inline-block, IE9 will use inline-block because it doesn't understand flex, and others will use flex because they do know it and it's below inline-block. Sure, this doesn't deal with setting the width, but we've got half the problem solved without any browser-specific code at all (in fact, this would work for IE7/8 too, so you can reduce your specific code for them as well). width might be solvable with a similar trick by specifying a default value using a measurement unit not support in older browsers like rem or vmin or something, and then overridding it with % for the older browsers, but whether that would work for you would depend on your actual layout.
Use a library such as Modernizr, which will add feature support flags that you can use in the form of class names on your <body> tag. For example, it will add a flexbox class for browsers that support it, and a no-flexblox class for those that don't. This means you can write CSS code that targets browsers that support the feature or not -- eg:
.flexbox #primary {
display:flex; //etc...
}
.no-flexbox #primary {
display:inline-block;
width:70%;
}
Use a browser hack. I really don't like suggesting this, but it is an option. There are CSS hacks that specifically target IE9 if you really want to use them. I won't repeat them here though as I don't think it's the best option. If you want to use them, Google will tell you what you need to know.
Use an IE9-specific class just as you are currently for IE7 and IE8. You're doing it already, so it doesn't seem like it should be too much of a stretch.
Just use inline-block across the board. If the inline-block layout works, why not just use that. Flexbox is great, but if you need IE7/8/9 support, you're not going to be able to use it consistently, so....?
Personally, I'd go with the Modernizr solution. It solves this problem very neatly, and can also deal with most other cases where you might consider having browser-specific styles due to missing features.
I am using the Pure Grids of PureCSS. I have a pure-g with three pure-u-1-3, containing a few paragraphs. The problem is that there is a difference in display between Chrome/IE and Firefox when one of the units is longer than the others.
http://jsfiddle.net/f3YNe/3/
http://i.stack.imgur.com/VFVYu.png
I have tried to use jQuery to calculate the highest pure-u-1-3 and setting the rest to this height. But it didn't work out as expected, since this grid has to be responsive as well (using pure-g-r)
Does anybody know how to make Firefox produce the same output?
As purecss has fixed the problem (v0.6) by implementing it in every browser, this answer is obsolete.
Previous answer:
Your problem is that PureCSS is using -ms-display: flex in Internet Explorer and -webkit-display: flex in Webkit Browsers. Opera, Firefox and (obviously) older IEs don't get this solution.
To get it working in Firefox (20+) and Opera you could apply the following in your stylesheet:
.pure-g-r {
display: flex;
}
Further information: http://css-tricks.com/using-flexbox/
Here a example using your fiddle: http://jsfiddle.net/f3YNe/12/
This has been fixed and accepted as a fix as part of pure's v0.6.0 milestone.
The fix can be seen on Github here: https://github.com/yahoo/pure/pull/351/files.
If you're using pure prior to 0.6.0 coming out adding
.pure-g-r {
display: flex;
flex-flow: row wrap;
}
to your css should make things play nice in your layout.
.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.
the spans .cursor and .cursorinner aren't displayed in opera, is there an opera specific css property I could set? is my css invalid or is this an opera bug?
i just tested this with different browsers, works in
ie 7-9
chrome
safari
firefox
doesn't work in opera tho
fiddle is here : http://jsfiddle.net/etj6z/1/
This isn't working because you're depending on 2 inline elements to have defined block dimensions. Adding display: inline-block; (or display: block;) to the cursor spans make the element display in Opera. There is an additional issue with the blinking, which is due to the same issue. You'd probably be better off using show() and hide() but otherwise you should be using display: [inline-]block; in the js also.
for instance:
I have a min-height on an element:
#myElement
{
min-height: 800px;
min-height: 799px;
}
and in IE I want it to only interpret the min-height:799px;
The best way is to use Conditional Statements and create a stylesheet just for IE. A Google Search will bring back many results but I find this to be very useful:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
If you look at the bottom of that article, it is possible to use hacks (although I don't recommend them) to target specific IE version within the SAME stylesheet.
With FireFox you can use the moz prefix like so:
#-moz-document url-prefix() {
#myElement {
min-height: 800px;
}
}
I'm sure there would be ones for Opera, Safari etc too - just search for browser specific conditional statements in Google :)