CSS Isssue only with IE 6 and IE 7

Discussion in 'CSS' started by gavy, Jul 6, 2009.

  1. #1
    I have a page which appears ok in all browsers except the IE 6 and IE 7, I get a bar on top of search which is on the right side. The issue only appears in IE 6 and IE7, no browser else.

    You can Check the website online also.

    http://www.ibestcity.com

    You will see the point i am locating to it, i have also attached the screenshot with it

    
    The Code of Page of Search function
     
    <tr align="left">
                    <td><div class="module-search">
                        <form action="searchwebsite.cfm" method="get">
                          <div class="search-search" style="padding-left:5px;">
                            <input name="searchweb" maxlength="20" alt="Search" class="inputbox-search" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
                          </div>
                        </form>
                      </div></td>
                  </tr>
     
    body, div, p, label {
            background-color:#001b2f;
            color:white;
            font:normal 12px Arial, Helvetica, sans-serif;
            line-height:14px;
    }
     
    .module-search {
            margin:0px 0px 9px 0px;
            overflow:hidden;
            background:url(../images/search_bg.jpg) repeat-x 0 0;
            height:36px;
            width:204px;
            border:1px solid #FFFFFF;
    }
    .search-search .inputbox-search { /*-------- working in all browsers ------*/
            background:none;
            border:none;
            color:#2c2c2c;
            float:left;
            font-size:11px;
            font-family:Arial, Helvetica, sans-serif;
            margin:0px 4px 0px 5px;
            padding:9px 0px 3px 5px;
            vertical-align:middle;
            width:144px;
    }
    * html .search-search .inputbox-search { /*------------------fix for IE6------*/
            height:29px;
            width:144px;
            margin:0px 4px 0px 0px;
    }
    .search-search .button-search {
            background:none;
            color:#cb670e;
            font:bold 12px Arial;
            height:24px;
            float:left;
            padding:0px 0px 0px 0px;
            width:57px;
            vertical-align:middle;
    }
    .module-search .box-indent {
            padding:5px 0px 0px 7px;
            color:#2c2c2c;
            font-size:11px;
    }
    
    Code (markup):
    [​IMG]
     
    gavy, Jul 6, 2009 IP
  2. dgryan

    dgryan Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Seems like you've sorta fixed it.. just take off border - if it doesnt work set height in the divs
     
    dgryan, Jul 6, 2009 IP