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.
Related
I've used to vertically center block-elements like this:
.parent {
display: table-cell;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
When I need IE9 and lower support. Using css-tables as a fall-back for older IE-s of course. I don't need flex for anything else. But recently I started to ask myself: why do I even need flex here? Css-table is a robust solution supported by virtually every browser in this planet and according to this Ben Frain's article it's even faster. Isn't css-table enough here? When asking people about this I got answers like "flex is more modern" etc. That's fine and I do understand, that there are things that are only possible with flex, but it isn't really an answer here. We're talking about simplest centering block-elements.
So i have two questions:
Do i have to use flex in the case like this?
If "yes" - why?
There's a reason we moved from using tables in HTML as a layouting tool.
It's not semantic. When we think of a table we think of a representation of data.
MDN explains it well.
Prior to the creation of CSS, HTML elements were often used as
a method for page layout. This usage has been discouraged since HTML
4, and the element should not be used for layout purposes.
However, HTML emails are an exception where tables are still commonly
used for layout purposes. The reason for this is poor CSS support in
popular email clients.
So unless you're designing e-mail layouts do not use table elements or css table properties for layouting.
You can still use it if you need fallback hacks like in your example, but other than that use modern appropriate methods , be it grids ,flex , floats or whatever.
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.
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.
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).
Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.
Now Internet Explorer wants to have display: inline; for the behavior I want.
How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.
You can use selectors like so:
\9 – IE8 and below, * – IE7 and below, _ – IE6
So in your case:
*display: inline;
You can simply add this to the rest of the css:
div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}
Read my blog post on this.
Update
IE version 5 till 8. (They are all
affected) – Cobra_Fast 1 min ago
So in this case, you'd use
div{display\9:inline;}
A horrible way to do it is: http://www.webdevout.net/css-hacks
Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.
To make inline-block work on block-level elements in IE7, I frequently add this to my answers:
Overlapping inline div
One list, simple float left, different cell sizes
How do I center a list as shown here?
multi-line tabs
Remove margin between rows of overflowing inline elements
How can I wrap content around a UL CSS Menu so content is seamless?
I sure hope what I'm suggesting everywhere actually works :D
See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
selector {
display: inline-block;
*display: inline;
zoom: 1;
}