I've tried every suggested bination 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>

I've tried every suggested bination 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>

• javascript
• html
• css
• border

• first of all CSS could be tricky. So put img on top of everything in your css file and the img tag should not have anywhere else border information as CSS will take that info rather than img {border : none;} – Dhruvenkumar Shah Commented Sep 28, 2012 at 12:43
• I'm betting the border is on another element. Try adding the CSS "border:0" to each element and see which one makes the border go away. – Travesty3 Commented Sep 28, 2012 at 12:43
• 4 If you aren't already, you should use a tool like Firefox + Firebug to troubleshoot CSS issues. It will show you the CSS being applied to any object in the page and shows you what file (and line number) that the style was defined in. – Robert Hanson Commented Sep 28, 2012 at 12:43
• it could be also a box-shadow applied – Fabrizio Calderan Commented Sep 28, 2012 at 13:00
• wats the final solution which worked for u? @Craig – Sparrow Commented Jul 19, 2021 at 8:42

5 Answers 5

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...

the problem is the button element and/or the div element around the <img>.

#basemapbutton img, button img,
#basemapbutton:active img, button:active img
#basemapbutton:focus img, button:focus img {
  border: none;
  outline: 0;
}

Try use content: ""; in css style.

#basemapbutton {
    content: "";

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

This should do:

#basemapbutton button {
    border: 0px;
    padding: 0px;
}

Cretae one class for the button like this <button dojoType="dijit.form.Button" baseClass="tomButton" class="remove_border" title="Switch Basemap">

Just include this point in your css for this class .remove_border{ border-style:none; padding:0px;}