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 12 of 12

Thread: Styling a Form

  1. #1
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Styling a Form

    I'm trying to turn this into xhtml/css:


    Here are a few things to note...

    The black background is an image with a slight gradiant. The magnifying glass should be the submit button.

    Styling the actual input field seems to be pretty easy. Getting the search button/image to look right is where it get's hard.

    Any advice?

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    just do

    <input type="image" name="submit" src="path_to_magnifying_glass_image" />

    to use the image as a submit button, and place it next to the text field.

    HTH
    Dan
    Last edited by whizard; 06-26-2007 at 04:01 PM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's what I've got so far in terms of code:
    http://joshuamcginnis.com/search.html

    For the life of me, I can't get the button to line up.
    Last edited by goodespeler; 06-26-2007 at 05:33 PM.

  • #4
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here, take a look at:
    http://joshuamcginnis.com/search.html

    The submit and input fields are right next to each other, but for some reason, the submit is always a few pixel's higher than the input field. It's much more noticeable in FireFox.
    Last edited by goodespeler; 06-26-2007 at 04:34 PM.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Your image is 40px high... so shouldn't your text field be the same height?

    Dan

    Edit:
    This CSS works for me in FF2:

    Code:
    #keyword{
    color: #fff;
    vertical-align:bottom;
    margin-bottom:5px;
    margin-top: 40px;
    width: 290px;
    height: 27px;
    padding: 3px 3px 3px 5px;
    background: #fff url(labelbg.gif) repeat-x top left; 
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    }
    
    
    #submit{
    	background: url(submit.gif) no-repeat left top;
    	height: 40px;
    	width: 40px;
    	margin-left: -10px;
    vertical-align:bottom;
    border: none;
    	text-indent: -999%;
    	line-height: 2px;
    }
    Last edited by whizard; 06-26-2007 at 04:43 PM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, the submit.gif image is 35 pixels high and 40 wide.

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Check out my edit
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #8
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, that was based off one of the methods I tried. I'm still seeing alignment issues in both FF and IE.

  • #9
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Gettin' close. This is where I was last night. Not sure where to take it from here.

  • #10
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    at http://joshuamcginnis.com/search.html, I changed

    #submit
    {
    vertical-align:bottom;
    }

    to:
    vertical-align:baseline;

    and it lined up.

    I dont have a developer extension on IE, so I couldnt test it there

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #11
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked great in FireFox, but made IE much worse...
    Last edited by goodespeler; 06-26-2007 at 05:46 PM.

  • #12
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How does it render now in each browser?

    Use this url: http://joshuamcginnis.com/


  •  

    Posting Permissions

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