Question

I’ve tried every suggested combination from previous questions in an effort to remove the gray border from my image buttons, as you can see from the code, when the image is clicked it opens a content pane below the button: border:none, border:0px, etc.

Nothing seems to be working. CSS can be extremely frustrating.

Below is the css and html I’m working with, stripped of the above fix attempts since they’d didn’t seem to work. I’m hoping it is something as simple as me overlooking or screwing something up.

Any help would be appreciated.

#basemapbutton {
    position:absolute;
    top:5px;
    right:150px;
    width:20px;
    height:40px;
    z-index:100;
}

and:

<!--Basemap Gallery-->      
<div id="basemapbutton">
    <button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Switch Basemap">    
    <img src="images/imgBaseMap.png"/>     
    <script type="dojo/method" event="onClick">   
        toggler[(dojo.style("panel","display") == "none") ? 'show':'hide']();
    </script>
    </button>   
    <div id="panel" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
        <span id="basemapGallery"></span>
    </div>
</div>

Answer 1

Just add at the top of your main CSS file this:

img {

border: 0px !important;
outline: 0 !important;

}

!important will override every inline style that could be added by javascript…