0

I am having an issue with the height of the password field differing from that of the textfield above it even if I apply style="height:22px" directly to both elements.

Current HTML:

  <h2>Username 
    <label>
      <input name="email" type="text" id="email" style="height:22px" />
      </label>
  </h2>
  <h2>Password  
    <label>
      <input name="password" type="password" id="password"style="height:22px"  />
      </label>
  </h2>

Current CSS:

#logonForm input[type=text], #logonForm input[type=password] { 
    font-size:18px;
    border-radius:8px;
    padding-left:10px;
    height:22px;
    width:364px;
}

This renders (with or without the style attribute) as

screenshot

How do I make it render as the same height and why is this occurring?

jerrygarciuh
  • 21,158
  • 26
  • 82
  • 139
  • You need a space between attributes: `id="password" style="height:22px"` – Steve Mar 14 '13 at 21:39
  • @Steve - added; no change – jerrygarciuh Mar 14 '13 at 21:40
  • @Adrift Added to style sheet; refresh has not shown a change but no idea how to force hard refresh on mobile borwser. – jerrygarciuh Mar 14 '13 at 21:41
  • Have you tried adding an explicit `line-height` to your CSS? – Steve Mar 14 '13 at 21:42
  • OK so current style is `#logonForm input[type=text], #logonForm input[type=password] { font-size:18px; border-radius:8px; padding-left:10px; height:initial; line-height:22px; width:364px; -webkit-appearance: none; }` cleared Safari cache but no change in display; also removed style attribute from html – jerrygarciuh Mar 14 '13 at 21:49
  • Can you provide a link? Also, why do you only set `padding-left` and not all `padding`. Try: `padding: 0 0 0 10px;` – Steve Mar 14 '13 at 21:52
  • Maybe this will prove illuminating? http://pockyway.com/logon.php – jerrygarciuh Mar 14 '13 at 21:53
  • Steve- that looks like it was the issue. Adding specific padding makes Safari do right. Can't seem to find a way to clear Chrome cache but I'm a happy camper. Want to add your solution as answer? – jerrygarciuh Mar 14 '13 at 22:03
  • Found cache in Chrome under Privacy... Clearing shows corrected sizes. Yay! – jerrygarciuh Mar 14 '13 at 22:06
  • Glad it worked. Just added it as an answer. :) – Steve Mar 14 '13 at 22:07

1 Answers1

1

You might have to add explicit padding for ALL sides, not just padding-left:

#logonForm input[type=text], #logonForm input[type=password] { 
    font-size:18px;
    border-radius:8px;
    padding:0 0 0 10px;
    height:22px;
    width:364px;
}
Steve
  • 8,609
  • 6
  • 40
  • 54