Display problem: built-in and display: built-in unit

Question

I have a problem in the display: inline and in display: inline block ....... how should I define as in css ... i.e. display: built-in for ie and display: built-in block for ff and chrome ....

Answer 1

You can use Conditional Comments to load CSS files with overrides that only Internet Explorer will load. For instance:

<!-- main stylesheet for all browsers (uses display: inline-block) --> <link href="main.css" media="screen" rel="stylesheet" type="text/css" /> <!-- overrides for IE 7 and earlier (uses display: inline where necessary) --> <!--[if lte IE 7]> <link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]--> <!-- overrides for IE 6 and earlier (uses display: inline where necessary) --> <!--[if lte IE 6]> <link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]--> 

Answer 2

Here is a good overview of CSS browser browsers: http://brainfart.com.ua/post/css-hacks-overview/

I think sections 4, 8, or 9 may apply to your case.

Answer 3

IE7 and below do not support the embedded unit. But there is a simple workaround. Since an inline block is just a put - an element that behaves like a block, but is aligned as an inline, you only need to specify IE as its inline element with the layout (IE idiossincracy). So:

 .el { display:inline-block; *display:inline; *zoom:1; } 

Here it is! Really simple. You can also use conditional comments and avoid breaking stars. I personally use the HTML declaration for Paul of Ireland ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ), and then I specifically target IE7 and below using:

 .el { display:inline-block; } .lt-ie8 .el { display:inline; zoom:1; } 

Answer 4

The problem with IE is that it does not support the "inline block". Therefore, to compensate for this, you have to swim the element. Thus, the container for floating elements should be emptied using "clear: both" unless everything is a fixed size, such as menu links.

I really like to find out what is not supported in each browser than to write separate style sheets for each.