Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Need help with Search-box CSS please

    Hello,

    I'm adding a search box and custom search button to my site.

    The search-box is looking ok in Internet Eplorer 8 and Firefox. But Internet Explorer 6 & 7 is not displaying correctly -
    http://www.tomsspecialreserve.co.uk/searchform2.html
    I have used 3 images - one for the left corner image, one for the middle repeat-x image, and one for the right-hand search-button image.

    My css and html is as follows -
    Code:
    #searchform div {
    margin: 0px 0px 0px 0px;
    background-image: url(images/searchbox_rounded_left_small.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    padding: 0px 0px 0px 8px;
    }
    #searchform #search {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background-image: url(images/searchbox_rounded_middle.jpg);
    background-repeat: repeat-x;
    border:none;
    border-width: 0px;
    height: 18px;
    }
    #searchform input {
    vertical-align: top;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(images/searchbox_rounded_right.jpg);
    }
    
    <form method="post" action="page.html" id="searchform">
    <div>
    <input type="text" name="search" id="search" /><label for="search"><input type="image" title="Search" src="images/searchbox_rounded_right.jpg" alt="Search" /></label>
    </div>
    </form>
    Last edited by moss2076; 12-02-2009 at 12:07 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Can anyone help with the display issue?

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Try adding float:left to #mod_search_searchword. That seems to fix it using the IE Developer toolbar.

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    I've moved the search box onto its own page to test it -
    http://www.tomsspecialreserve.co.uk/searchform2.html
    I will try adding a float left when I get home.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    I think I have fixed it, It looks ok in my IE8 and IE7 Compatability view, and FF 3.55, and in IE Testers IE6.

    I added a float: left; to the #searchform div, and #searchform input, and set the font-size of the #searchform #search to 12px, and gave it a height of 100%.

    Could you see how it looks from this link? http://www.tomsspecialreserve.co.uk/searchform2.html
    Last edited by moss2076; 12-02-2009 at 05:21 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Looks OK to me now...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •