JQuery - CSS ninja help wanted

Question

I'm using the JQuery Slider Control

IE 6 looks FUBAR.

Screenshot (how it should look)
img24.imageshack.us/img24/9786/safarij.png

Screenshot (IE6)
img99.imageshack.us/img99/3418/ie6o.png

What CSS can I use for IE6 to make it look like Firefox/Chrome/Safari?

Any CSS ninja magic would be greatly appreciated.

Answer 1

Use IE's conditional comments to craft a special stylesheet that is specific for IE6 to fix any problems.

http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

Answer 2

You have to specify the line-height of the blue bar element, and set a height too. Set those attributes with _ before them (like _height: 2px) so that only IE will parse them.

If you care about CSS validation, then do what Daniel White suggested.

Answer 3

To achieve the curved 'buttons' on the slider, the script uses CSS property border-radius, which is not supported in <=ie6. The blue bar is easy enough to fix, just give it a fixed height and a line height.

Answer 4

Try adding font-size: 0; that's helped me in situations like this in the past.

Or maybe zoom: 1; to get IE to tag the element has having hasLayout.

Update on this:

Just tested by adding

 div.ui-slider-range
,div.ui-widget-header
{
    font-size: 0;
}

and it seemed to work, zoom:1 wasn't needed.