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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Form Not Showing Correctly In Browsers...

    I am confused

    My form or what I would it to look like is correct in dreamweaver, but when I uploaded in and use IE it doesnt show right...

    What I am trying to do is add some spacing between the text box and start button.. I have added some padding to that section which look likes it works in dreamweaver..

    css code

    Code:
    .rightbox #keyword {
    float:left;
    width:122px;
    padding: 0px 10px 0px 0px;
    
    
    }
    Source code
    Code:
    <form id="form2" name="form2" method="post" action="">
        <label>
          <input type="text" name="keyword" id="keyword" /> 
        </label>
      </form>
      <p><img src="images/startbutton.jpg" width="51" height="21" /></p>
    website http://www.supreme-host.com/web/categories.php

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Try using margin instead of padding, but keep the values the same.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Uhm… well, your “button” is outside the form (and in a paragraph for some inexplicable reason) so this ain’t gonna work anyway. Also you can’t style form controls very much, especially to work equally well in all browsers.

    Other issues:
    1. The name attribute is not allowed/necessary on any element other than form controls (input, select, textarea).
    2. Form controls must be inside some block element in the form, they can’t be direct children of the form.
    3. Use labels with text with form controls for better accessibility and user friendliness.


    Try this:

    Code:
    <form id="search" method="post" action="">
    	<fieldset>
    	<legend>Product Search</legend>
    	<div>
    		<label for="category">Search by category</label>
    		<select name="category" id="category">
    			<option>category 1</option>
    			<option>category 2</option>
    		</select>
    	</div>
    	<div>
    		<label for="keyword">Search by keyword</label>
    		<input type="text" name="keyword" id="keyword" />
    	</div>
    	</fieldset>
    	<div class="submit"><input type="image" src="images/startbutton.jpg" /></div>
    </form>
    Code:
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #search legend {display: none;}
    #search div {margin: 10px 0;}
    #search #keyword {
    	float: left;
    	margin-right: 10px;
    }
    Last edited by VIPStephan; 01-02-2010 at 07:41 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    .rightbox #keyword {
    float:left;
    width:122px;
    margin: 0px 10px 0px 0px;


    }


    padding is inside the box. margin is outside the box.

    Other problems.


    /edit ... Holy Cow A 3-way tie!
    Last edited by Excavator; 01-02-2010 at 07:41 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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