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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts

    Search Form Positioning

    Hey everyone,

    I'm trying to position a custom search form with a background in a website I'm developing. When I do, it looks great in Firefox, but in IE it throws off the tables.

    Link to problem
    Screenshot

    CSS:
    Code:
    }
    .search_field    {
        border-width: 0px;
        background-image: url(images/image_10.png);
        background-repeat: no-repeat;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #333333;
        width: 340px;
        height: 31px;
        padding-top: 8px;
        padding-right: 40px;
        padding-bottom: 0px;
        padding-left: 65px;
    Form:
    Code:
              <form action="search.php" name="search" method="GET">
                <input type="text" name="query" id="query" class="search_field" style='width:235px;height:23px'>	
                <input type="hidden" name="search" value="1">
              </form>
    Does anybody have any ideas how to fix this?


    P.S, please no comments about the disadvantages of tables and why I shouldn't use them, I just need to get this issue fixed. Thanks.
    Last edited by jrp1; 06-16-2009 at 06:00 PM.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    bump

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    edit : err my bad
    hold on

    Try some vertical-align
    Last edited by Jahren; 06-16-2009 at 07:41 PM.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    I tried valign="top" on everything in the header, and it doesn't seem to do anything. The search seems to throw everything out of whack.

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    vertical-align
    this might help

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    No go =\

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    *bump*

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    The short fix for you would be to add:
    Code:
    form {margin:0; padding:0;}
    to your CSS.

    This will do what you want, but you should consider fixing everything properly as well. You have some validation errors: w3c validator

    You are missing several <tr> tags. A <td> tag should not be a direct child of a table.


  •  

    Posting Permissions

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