Question

I’m applying a css class for the following asp.net custom control which renders in browser something like this:

<div class="box search_mlo">
 <div class="gray_box">
  <div class="blue_box">
   <div>
    <input id="Search_srcText" class="btn" type="text" onblur="return   objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
    </input>
    <a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
     <span>Search</span>
    </a>
  </div>
 </div>
</div>
</div>

The CSS class is:

.blue_box div a.btn 
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;    
}
.blue_box div input.btn 
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}

so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I’m trying to replace image but I’m getting only half of the image something like below..

https://i.stack.imgur.com/Dfaqn.jpg

You can see a search text coming inside that image.

The prototype is something like this and the first button should match with this:

https://i.stack.imgur.com/QpRmg.jpg

I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.

can any one help with feasible solution where I can get the entire image.?

Thanks in advance.

Answer 1

@Sayed; a tag is an inline element & inline elements didn’t take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:

.blue_box div a.btn 
    {
        background: url("/publish/images/btn_search.jpg") no-repeat;
        height: 36px;
        width: 86px;   
        display:block 
    }