DXImageTransform.Microsoft.gradient doesn't work on inline elements

Question

I have some navigation elements constructed like so

  <div id="topnavcontainer">

              <a href='/web/link1.html' >link1</a>
              <a href='/web/link2.html' >link2</a>
              <a href='/web/link3.html' class='current'>link3</a>

  </div>

The CSS for #topnavcontainer a.current specifies a gradient and uses DXImageTransform so that IE can render the gradient too.

It does, however, only seem to work if I set #topnavcontainer a.current to display: block which ruins the way the navigation works.

Does anyone know any work arounds?

Answer 1

Yes: for filters to work, your element must have layout . There are a number of ways to do this via CSS (outlined in the linked document). One way (which is not valid CSS but will work) is

zoom: 1;

Another that is valid CSS but may affect formatting. is

display: inline-block;