i have a problem in display:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....
+3
A:
Here is a good overview of CSS browser hacks: http://brainfart.com.ua/post/css-hacks-overview/
I guess section 4, 8 or 9 could apply for your case.
peter p
2010-01-03 11:24:06
+2
A:
You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:
<!-- 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]-->
Phil Ross
2010-01-03 11:27:29
what will happen if i add both display:inline and display:inline-block in the same css file...
Web Worm
2010-01-03 11:37:26
if you apply to values for the display property of an element, the latter will overwrite the former. if you do not want to use several css files, try to use one of the css hacks
peter p
2010-01-03 11:40:21
A:
The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.
I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.
MiG
2010-01-03 12:20:56