SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form fields won't accept cursor in Firefox

    Greetings ... I am developing a site that uses a wordpress theme ... the customer wants it customized to include two login panels for Attorneys and Reporters at the very top of the screen. I've altered the index file to include the correct markup, but for some reason, the form inputs won't allow cursor input when viewed in Firefox. Safari, Chrome and IE seem better ... you can at least enter text, but there is still something strange going on when you do ... Could this be due to "ham-fisted" markup? I used a couple of <ul> tags inside the <form> tags. Also, you don't get the hand cursor when you roll over the "Log In" buttons, which would be nice. Again, this makes me think I coded it wrong, but wouldn't know what to do otherwise. It's like there are other elements higher in the z-index than the inputs, but in Firebug I don't see anything.

    The text in the log in buttons is off in Firefox, but it all seems to look pretty good in IE for some reason. So, what I would like is for that whole row of inputs to align in a vertically centered way. so it looks like in IE, but cross-browser. And, obviously, I'd like to be able to actually enter text into the inputs.

    Any direction or guidance is appreciated.

    http://fishidesign.com/casale/

    Thanks.
    | sc

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I turned off random classes with your inputs and found that if I remove the top and bottom padding it works. I can only assume (didn't dig deep) that your inputs have some sort of height and weird excessive padding - so when you click in, the cursor displays, but you cannot see it because it is hidden.

    Whatever the reason maybe, check this line:
    Code CSS:
    #top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select

    It has a padding of 8px 6px. Delete 8px or change it to 1px and it works.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That's exactly what it seems like too. That CSS must have come from the theme ... I guess I will just override it inside my header div there ... I have no idea, but assume it's set that way in the theme for some other reason. That might also solve another issue I was having where I just could not seem to tighten up the height of that div and make it more compact ... the excessive padding would explain that too.

    Thanks for your assistance.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any idea on how to get the hand cursor when your mouse is over the "Log In" buttons? Also trying to figure out why things aren't lining up vertically along that div in firefox? I'm seeing a uneven, stair stepped kind of look in FF with the text of the login buttons all the way down towards the bottom.

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Location
    Bucharest
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by scott1964 View Post
    Any idea on how to get the hand cursor when your mouse is over the "Log In" buttons? Also trying to figure out why things aren't lining up vertically along that div in firefox? I'm seeing a uneven, stair stepped kind of look in FF with the text of the login buttons all the way down towards the bottom.
    Code:
    .casale-login-panel input[type="button"] { 
    width: 58px;
    height: 18px;
    line-height: 18px;
    margin: 0;
    padding:0;
    color: #FFFFFF;
    background-color: #444444;
    font-size: 9px;
    border: 0;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    float: left;
    cursor:pointer;
    }
    Last edited by mironcatalin; Nov 18, 2013 at 12:04. Reason: Was in hurry

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still having difficulty getting the text to look right inside the form fields ... when you cursor in now, the text appears way towards the top of the input field ... then it gets cut off in the middle ... it's almost like the baseline has been shifted up several pixels. Any idea how to get the text to display nicely in the middle of the input field?

    http://fishidesign.com/casale/

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Remove the top and bottom padding from those inputs and it should display ok.

    e.g.
    Code:
    #top .login-panel-list .login-fields {
    height: 18px;
    line-height: 18px;
    padding: 0 8px;
     }
    You really should be using (associated) label elements for your labels and not just bare text as that is bad for accessibility.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. Will do. I'll wrap the text in <label> tags ... I left it out to keep it from inheriting styles, but that's just lazy ...

    Thanks.


Tags for this Thread

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
  •