div width auto !important seems not to work in ie6/ie7

THE HTML

<div class="grid_11 omega" id="homeGalleryFichaGold">
        <div class="contSlideGalleryUp" style="display: none;"> 
                                    <a href="javascript:;" onclick="$('#panelGallery').slideToggle(); $('.contSlideGalleryUp').hide(); $('.contSlideGalleryDown').slideToggle('slow');" id="openGallery" class="openGallery" title="">HOTEL GALLERY</a>
        </div>
        <div style="display: block;" class="contSlideGalleryDown"> 
                                    <a href="javascript:;" onclick="$('#panelGallery').slideToggle(); $('.contSlideGalleryUp').slideToggle('slow'); $('.contSlideGalleryDown').hide();" id="closeGallery" class="closeGallery" title="">HOTEL GALLERY</a>
                                </div>                        
                                <div style="display: block;" id="panelGallery">
                                    <ul>
                                        <li class="selected"><a class="photos" href="#" title=""><span>PHOTOS</span></a></li>
                                        <li><a class="videos" href="#" title=""><span>VIDEOS</span></a></li>
                                        <li><a class="suites" href="#" title=""><span>SUITES 3D</span></a></li>
                                        <li><a class="location" href="#" title=""><span>LOCATION</span></a></li>
                                        <li><a class="publication" href="#" title=""><span>PUBLICATION</span></a></li>
                                        <li><a class="tour" href="#" title=""><span>INTERACTIVE TOUR</span></a></li>
                                        <li><a class="panorama" href="#" title=""><span>PANORAMA</span></a></li>
                                        <li><a class="googlearth" href="#" title=""><span>GOOGLE EARTH</span></a></li>
                                    </ul>
          </div>                                       
    </div>

Basically i can't get #panelGallery to have an 'auto' width in IE6/7 (works fine in all other)

CSS

    #panelGallery {
        background-color: #333;
        color: #FFFFFF;
        float: right;
        font-size: 11px;
        font-weight: bold;
        height: 65px;
        line-height: 65px;
        opacity: 0.9;
        /*width: 640px;*/
        position:absolute;
        bottom: 0px;
        right:0px;  
    }
    .contSlideGalleryDown {
  开发者_Go百科  position:absolute;
    bottom: 65px;
    right:0;
}

And i add this hack for ie6/7

#panelGallery {
    *width: auto !important;
}

But still uses all width

It looks like IE uses Quirks Mode, because I'm sure that IE6/IE7 have support for width:auto. You can insert bookmarklet below to detect rendering mode.

javascript:alert(document.compatMode)

CSS1Compat means Standards Mode and BackCompat Quirks Mode.

If it shows BackCompat that means that IE seen something before <!DOCTYPE>. IE 6 and 7 uses Quirks Mode if it sees nearly anything before DOCTYPE, BOM mark or HTML comment counts into it.

There is already some question about it, so I will just link to it: Why is the site running in IE quirks mode?

By the way, http://validator.nu/ can detect if site would trigger Quirks Mode in IE by using either comments or BOM mark.

Also, some DOCTYPEs can trigger Quirks Mode even if there is nothing before them can trigger Quirks Mode. http://hsivonen.iki.fi/doctype/ contains list of those special DOCTYPEs.

Have you tried to use the conditional statement rather than a star hack?

Something like:

<!--[if lte IE 7]>
<style>
#panelGallery {
   width: auto !important;
}

</style>
<![endif]-->