I'm working on a web app... unfortunately it has to work with the worst piece of software ever written, yes ie6.
I really like the CSS display:table and display:table-cell properties, but of course it doesn't work in ie.
Has anyone found any fixes for this? I have been looking, but haven't found anything.
Conditional CSS, .htc files, javascript...anything?
I would really like to avoid making everything with floats and clears
Sorry. There isn't a fix to make IE6 support CSS display:table. The only way to acheive this layout in IE6 is to actually use <table> elements.
First question: do you really need to support IE6? If you can simply drop support for it, you'll solve yourself a whole ton of problems, including this one. Current global usage of IE6 is below 3%, and even lower in most developed countries.
If you do still need to support IE6, then your most obvious solution is simply to swallow your semantic markup pride and just use a <table> tag.
As described by #Tom, the next best solution is to write your layout using display:inline-block;.
inline-block allows you to define your elements as blocks, but still keep them in the text flow (kinda the way the <img> tag works by default). If you combine this with fixed element widths, and wapper divs around rows, you could acheive something similar to a table, although it may be hard to get it to expand dynamically with the page width.
The one big "gotcha" bug around this is that inline-block only works in IE6/7 for elements that have a default style of display:inline. In other words, it works for a <span> but not for a <div>. Not a disaster, but something to be aware of, especially since you're specifically asking about IE6 support. Other than that, the good news is that you should be able to get away with using display:inline-block without any other hacks or work-arounds.
IE does not support display:table and display:table-cell but IE7 and below do support display:inline-block. The common way to make this work is by doing the following:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
Keep in mind that CSS gives you a lot of positioning power and given some context of how you want your layout to look I might be able to give you a better solution.
Due to misunderstanding let me clarify the code above.
display:-moz-inline-stack; is declared for older versions of Firefox.
zoom:1; IE has a property called hasLayout, this is a way to trigger it.
*display:inline is known as a *property hack used to hide this line from all non-IE browsers
The zoom:1 and *display:inline effectively allow block level elements to behave like inline elements (so that inline-block will work in IE6+)
For more information please read:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Related
If I use <main>, <article>, <aside>, <footer>, <header>, or <nav> elements will there be any bad side effects when someone with IE8 tries to load my page?
You will find many articles on this saying that some of these new elements are no different than generic block elements so they don’t pose any compatibility problems and all you need to ensure compatibility is to add a CSS rule to your website that causes the relevant elements to behave like block elements. Like this:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
But IE8 and previous versions of IE pose a challenge. Any element not in the official roster of elements cannot be styled with CSS. That means we cannot make then behave like block elements or give them any formatting because they behave as if they don't exist.
Fortunately, a workaround exists for IE to recognize these new elements allowing them to be styled, and thus giving us full use of these new semantic tags. It’s a tool called HTML5Shiv.
The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works.
But you need to make sure to call it early on in your website before any of those elements are used, otherwise it won’t work.
To answer your question, (what do older browsers do?), some browsers will ignore the element. Some treat them as errors. Some will treat them as <div>. It's pretty much all over the place. So you need to do something and setting them to block level is the best thing you can do for them.
Here's a longer review along with suggestions.
It seems that the community here agrees that the old "clearfix" hack has now been depreciated and superseded by overflow:hidden. Unfortunately there are situations where even using this method causes problems. (For example: This would look like this if it worked correctly.)
The main problem with using the old fashioned <div class="clear"> seems to be that it creates a div element for sole purpose of altering the presentation -- which seems to be muddying the ideal of pure semantic markup with presentation.
Other than that, though, it appears to work well with all browsers and in all situations (which cannot be said for "clearfix" or overflow:hidden).
Are there any other drawbacks to using clear:both? Is it really that bad to use? Or is it just personal preference?
It's fine. Not as nice as a pure CSS method, no, but there are times when overflow:hidden / auto just won't work well (for example, when you want an absolutely positioned element to 'pop' out of its container).
Yes, it adds a maintainability cost, and yes, it's theoretically suboptimal for SEO, but it's hardly a cardinal sin.
There are side effects
clear: both has a side effect that if there are any other floats present in the same block formatting context, the clear: both element will be forced below them. Sometimes this is what you want. Sometimes it isn't. This jsbin demonstrates a case where it will eat your lunch:
The trick is in controlling which floats a cleared element should interact with. You do this with block formatting contexts, an insulated rectangle inside of which all floats and cleared elements interact. Floats and cleared elements outside of a block formatting context cannot interact with floats or cleared elements inside.
This is one important drawback to keep in mind when using clear: both. Is it really that bad to use? No. You just have to be aware of how floats and clears interact and how to prevent them from doing so when you need to. In many situations these issues don't come up, so choosing a method for clearing floats can be a matter of personal preference. But some situations demand a deeper consideration of how floating and clearing works. Every clearing method has side effects, so you have to pick the right one for your situation. There are detailed answers at Which method of 'clearfix' is best?
clear:both simply means that there are no floats allowed to the left or right. An alternate method does exist, but it isn't safe for older browsers.
.element:after { content:""; clear:both; }
I'm pretty sure clear: is standard, floats are just tricky if you do not fully understand them (it took me a while).
The reason the white space exists is that floated elements do not actually 'exist', in the sense that they give no definitive dimensions for the container to wrap around. You can use clear:left clear:right or clear:both on an item after the float and it will create a hard line, the same as using the <div class="clear"></div> method.
Personally, I use the tried-and-true hack and add pseudo elements for when it's (hopefully) supported all around.
This is a fairly generic question about cross-browser compatibility.
At various points in a design I'm currenly working on the only way to achieve the layout and style that I want (without resorting to using images) is to use the display:inline-block css style option. However, this is not supported by IE8 and other older browsers and this results in my design beign broken.
So there are two parts to my question
1 - Is there a method of achieving a similar or equivalent effect for IE8?
2 - If not, how best can I make my design degrade smoothly?
For your reference, here's an example of where this is being used in my design.
<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct
It is a 20x20 pixel colour block to explain the colours in a chart.
More generally this issue arises whenever I want greater formatting & layout control over a particular bit of text etc within a body of text.
In the design I'm currently working on I'll be dropping support for the older browser types anyway since it's heavily reliant on the canvas element. However, I thought this would be a good question to ask as I've come across the problem several times before.
Thanks
Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).
Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).
Here is, to my knowledge, the best way to get a cross-browser display:inline-block:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
As given here:
IE supports inline-block, but only for elements that are natively
inline. So, if you really want to use inline-block, you’re restricted
to spans and strongs and ems...
Yes, it is not logical, because normally it doesn't matter if you use div or span... but remember - this is IE :)
So just change <div> to <span> and that's it!
use this code
*display: inline;
*vertical-align: middle;
display: inline-block;
*zoom: 1;
*display: inline;
you can add inline-block for other browser but for IE you can add style with *. it only works in ie
As you all know display: inline-block; doesn't work in IE6. Amazingly, display: table, table-row, table-cell also don't work. How can i possibly not use tables for a complex pages? What techniques are out there to get divs to behave like tables in IE6? In further readings/references would be appreciated.
While writing valid, semantic markup for layout on ie6 is a painful task, it is not impossible, here are some sources.
How to make it work on ie6:a guide to the problems you'll face on ie6 and how to fix them.
Quirksmode: Great guide about browser support for every css declaration.
Cross-Browser inline-block. a rather long but very thorough
article on cross-browser inline-block implementation.
I hope you find them helpful.
I am trying to move away from tables but it's proving too difficult.
This is the webpage "http://outsidemma.com/index.php"
I don't understand why the two green boxes don't align properly on Chrome and older versions of Opera.
This works perfectly well with firefox 3.5 and IE8.
I would like to know the reason behind this strange behaviour.
Fieldset is treated very differently in each browser.
You should be using either
dividers <div>content</div>
A list <ul><li>content<li></ul>
to seperate these.
In both cases you should set the style float:left;
Instead of display:inline-block, try float:left
As others have mentioned this is because some browsers treat a fieldset with different display defaults.
It may interest you to use a CSS foundation like YUI Reset to remove all the inconsistencies of how different browsers treat elements:
http://developer.yahoo.com/yui/reset/
One nice thing about the YUI foundation is that you can use YUI Reset, Fonts, and Grids separately if you only want a piece. You can also use YUI Base to add default styling that is consistent across all browsers.