Inline block doesn't work in internet explorer

Question

I have this CSS code with an inline-block. Can anyone tell me how to make it work in Internet Explorer 6 and 7. Any ideas? Maybe I'm doing something wrong? Thank you!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }

Answer 1

In IE6/IE7, display: inline-block only works on elements that are naturally inline (such as spans).

To make it work on other elements such as divs, you need this:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

*display: inline uses a "safe" CSS hack to apply to only IE7 and lower.

For IE6/7, zoom: 1 provides hasLayout. Having "layout" is a prerequisite for display: inline-block to always work.

It is possible to apply this workaround while keeping valid CSS, but it's not really worth thinking about, particularly if you're already using any vendor prefixed properties.

Read this for more information about display: inline-block (but forget about -moz-inline-stack, that was only required for the now ancient Firefox 2).

Answer 2

*display:inline works fine as IE7 hack. But, you can add zoom:1 to the code as *background:#fff; *display:inline; zoom:1. Here, you can put your background color code. Sometime, you will not see the layout on the screen, say, for example, list-items will not appear on screen. Then, in such cases this works great and appear as it does in other browsers.