SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Kent, UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form input problem...

    I've run into a problem with styling an input field, more specifically the margin property. In firefox, safari and opera the input field behaves normally, but in IE it assumes there is additional margin on the left of some sort - anyone had this problem before?

    Live preview - vimdata.com/code/

    Code CSS:
    div#client {
    	float:left;
    	width: 322px; min-height: 209px;
    	background: url(../images/content_bg.gif) #fefefe repeat-x;
    }
    	div#client img.side { float:right; }
     
    	div#client form {
    		float:left;
    		width: 252px; height: 209px;
    		background: url(../images/contact_bg.gif) no-repeat top;
    		margin: 22px 0 0 16px;
    	}
     
    	div#client h1 {
    		float:left;
    		width: 252px; height: 16px;
    		background: url(../images/client_login.gif) no-repeat top left;
    		margin:20px 0 0 20px;
    	}
     
    	div#client p {
    		float:left;
    		width:220px;
    		color: #7e7e7e;
    		margin:7px 0 13px 16px;
    		line-height: 18px;
    	}
     
    	div#client form input {
    		float:left;
    		width: 215px; height: 26px;
    		margin: 0 0 1px 0px;
    		padding: 6px 0 0 8px;
    		border: 0px;
    		background: url(../images/client_input_bg.gif) no-repeat top left;
    		color: #b2b1b1;
    		font-style: italic;
    	}

    Code HTML4Strict:
    <div id="client">
       <form action="#" method="post">
          <h1>Customer Login</h1>
          <p>Are you already one of our awesome customers? Login below;</p>
          <input type="text" name="username" size="20" value="Username" /><br />
          <input type="password" name="password" size="25" value="password" />
       </form>
       <img src="images/content_right.gif" class="side" alt="Right Main" />
    </div>

    Any help would be much appreciated.

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Kent, UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Already sorted it. For those who may come across this issue, I removed the float and added display:block; as well as modifying the margin to margin: 0px auto 1px;


Bookmarks

Posting Permissions

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