CODEWITHSUNDEEP
csshtmlcss-float
Amin Sayed
Amin Sayed

Reputation: 1260

CSS not working for button appearence - Internet Explorer

I Have the following HTML and CSS for the current scenerio:

enter image description here

As you can see, the search textbox and the filter dropdown are appearing perfectly in-line. But the button is appearing down.

Here is the HTML code for all the 3 controls:

<table>
<tbody>
    <tr>
        <td>
            <div class="search_result_div">
                <div>
                    <input type="text" style="width:200px;" id='searchButton' value="some text"><span>&nbsp;&nbsp;in&nbsp;&nbsp;</span>
                    <select id="filterDropdown">
                        <option value="all" selected="selected">All Areas</option>
                        <option value="docs">Documents</option>
                    </select>
                    &nbsp;&nbsp;
                    <a onclick="return callSearch();" class="btn" id="searchButton" href="../sys/SearchResults.aspx?q="><span>Search</span></a>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</tbody>
</table>

Here is the CSS for all the controls:

.search_result_div a.btn 
    {
      background: url("/images/bg_btn_left.gif")  no-repeat scroll left center transparent;
      display: inline !important;
          float: none;
      font-size: 11px !important;
      line-height: 21px !important;
      margin: 0 !important;
      outline: medium none;
      padding: 3px 0 3px 2px !important;
      text-indent: inherit !important;
    }

 .search_result_div a.btn span 
    {
        background: url("/images/bg_btn.gif") no-repeat scroll right center transparent;
        font-weight: bold !important;
        margin: 0 !important;
        padding: 4px 8px 4px 6px !important;
    }

Note: The button is divided into two images.

bg_btn_left.gif : enter image description here

bg_btn: enter image description here

Please suggest where am I going wrong?

Thanks

Upvotes: 3

Views: 733

Answers (6)

Anita Sharma
Anita Sharma

Reputation: 175

Try this:

<style type="text/css">
.search_result_div a.btn 
{
  background: url("bg_btn_left.gif")  no-repeat scroll left top transparent;
  display: inline !important;
      float: none;
  font-size: 11px !important;
  line-height: 21px !important;
  margin: 0 !important;
  outline: medium none;
  padding: 4px 0 3px 2px !important;
  text-indent: inherit !important;
}

.search_result_div a.btn span 
{
    background: url("bg_btn.gif") no-repeat scroll right top transparent;
    vertical-align:top;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 4px 8px 4px 6px !important;
}
</style>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey i think you should give to some properties your .search_result_div a.btn

as like this 

input{
vertical-align:top;
}
.search_result_div a.btn{
display:inline-block;
vertical-align:top;
*display:inline; // for ie
}

Upvotes: 1

ThdK
ThdK

Reputation: 10556

I always add this css file css.reset to my project to make sure i don't use the default css settings defined by the browser.

Upvotes: 1

doniyor
doniyor

Reputation: 37886

look here it is: http://jsfiddle.net/YUXxf/ your code is working as you wish but i think the image has a top border bigger which is pushing the image downwards..

Upvotes: 1

odupont
odupont

Reputation: 1976

For inline elements, you can use the vertical-align: middle; CSS property to align verticaly.

Upvotes: 1

Ashwin Singh
Ashwin Singh

Reputation: 7355

Its one of the problems I had to go through myself. I think I solved it by setting all default margins and paddings to zero. See if that helps you.

*{margin:0px; padding:0px;}

or if its a problem of aligning use 

vertical-align: middle;

Upvotes: 1

Related Questions