www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Styled Forms & FireFox

  1. #1
    Join Date
    Oct 2006
    Location
    California, USA
    Posts
    121

    resolved [RESOLVED] Styled Forms & FireFox

    The Styled Forms in Firefox are being pushed down.

    Click here for screenshot comparison

    Any ideas on a fix?

    The CSS for the form is:
    Code:
    .login {
    	border: 1px solid #bdc1a3;
    	background: url(img/input_box.gif) repeat-x;
    	height: 11px;
    	length: 50px;
    	width: 50px;
    	color: #990000;
    	font-size: 9px;
    }

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Do you have vertical-align:middle on the inputs?

  3. #3
    Join Date
    Oct 2006
    Location
    California, USA
    Posts
    121
    Yes, and it has no effect with or without in FireFox...

  4. #4
    Join Date
    Oct 2006
    Location
    California, USA
    Posts
    121
    Does this not happen normally? Click for Live Demo

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The form needs a div to be valid:
    HTML Code:
    <form class="log">
    <div>
    <img src="img/user.gif"/>
    <input class="login" type="text" name="username"/>
    <img src="img/pass.gif"/>
    <input class="login" type="password" name="pass"/>
    </div>
    </form>
    And the imgs need to be vertical-align:middle, not vertical-align:bottom as you have them now.

  6. #6
    Join Date
    Oct 2006
    Location
    California, USA
    Posts
    121
    The <div> fixed the problem...must have skipped over that. ;( Thanks for your help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles