CODEWITHSUNDEEP
htmlinternet-explorer-8cross-browsercss
user1694691
user1694691

Reputation:

Equivalent of div display inline-block for IE8, IE7 and older browsers

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

Upvotes: 8

Views: 22244

Answers (4)

GeniusJRS
GeniusJRS

Reputation: 119

  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

Upvotes: 0

Joel Kinzel
Joel Kinzel

Reputation: 970

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;

Upvotes: 10

Tomas
Tomas

Reputation: 59495

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!

Upvotes: 4

Web Designer cum Promoter
Web Designer cum Promoter

Reputation: 1336

use this code

*display: inline;
*vertical-align: middle;

Upvotes: 0

Related Questions