Form fields won't accept cursor in Firefox

HTML & CSS
1

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

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:

#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

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

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 

.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;
}
6

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

Hi,

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

e.g.


#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. :slight_smile:

8

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.