I can probably help you on the clipping bit…
The trouble is that different browsers render what is supposed to be the same font in slightly different ways so the fonts end up being different sizes in different browsers. This could be just the browser’s rendering but it could also be because the particular browser is using a different font from the font-family list.
In this case, it seems that FF is using a slightly larger font than Chrome. You can fix it by altering this style rule in syle.css:
#respond input[type="text"] {
display: inline;
height: 11px;
width: 530px;
}
Setting the height property to 20px worked for me. So add this to style.css:
#respond input[type="text"] {
height: 20px;
}
Hopefully you’re doing this in a child theme style.css file.
Cheers
PAE
Thread Starter
DW83
(@dw83)
Thanks so much for your help! Setting the height to 20px eliminated the clipping problem. You wouldn’t believe how long I’ve spent trying to get my head around what was happening!
Now I’m left with a slight problem in that the text entered into the boxes is set slightly lower than the labels (’email’, ‘author’ etc) in all browsers. If you have any insight into how to correct that, I’d be very grateful.
There’s also the z-index problem, which I can’t figure out how to fix.
Yes, I read up on child themes and am following that advice. Thanks very much for helping!
This is the rule that sets where the text appears:
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
...
top: 32px;
...
}
If you set that to about 36px you should be fine.
I’m not sure how the z-index business works, TBH. I think it has to do with this rule:
#respond input[type="text"]:focus, #respond textarea:focus {
display: inline;
float: left;
font-size: 13px;
padding: 10px;
position: relative;
text-indent: 0;
width: 530px;
z-index: 1;
}
Try giving that a z-index of 2 or something. The idea is that it lays over the label on focus. Unfortunately I can’t get Firebug to let me try that out. I got the idea from this article. Don’t know if it’s any help.
Cheers
PAE
Thread Starter
DW83
(@dw83)
Ah, resetting ‘top: 32px’ to 36px worked. That’s great – thanks very much!
No luck on the z-index I’m afraid. I tried setting the value to 2, 0, and deleting the z-index altogether, but none of those worked…
Thread Starter
DW83
(@dw83)
I should have mentioned that there’s also a slight problem with the box where you post the actual comment itself. In Chrome, this box seems to resize when you click into it. I’d like to stop it from doing this, if possible. Again, any advice would be much appreciated.
Very best wishes, and thanks in advance!
Yeah. Of course. The overwriting happens when the input loses focus, not when it getsd it. Duh!
Anyway, reached the extent of my knowledge, I’m afraid. I hope somebody else will be able to help you with the z-index thing.
Is the form being produced via a plugin? If so, have you thought about contacting the author?
Cheers
Thread Starter
DW83
(@dw83)
no problem, thanks v much for your help! the form isn’t from a plugin I’m afraid; it’s all coming from the style.css.
Thread Starter
DW83
(@dw83)
As the moderator removed my comments form css, here is a link to it: http://pastebin.com/TtceApu3
Thread Starter
DW83
(@dw83)
Is anyone able to help with this?
To recap, the remaining problems are:
1. When you type text into the ‘author’, ’email’ or ‘website’ fields in the comments form, the ‘z-index’ setting doesn’t seem to work in the way it should – i.e., the text you write in is laid over the top of the label text. Would indenting the text help here? Any advice would be greatly appreciated.
2. The box where you write the actual comment resizes whenever you click into it; I’d like to prevent this from happening if possible.
The comments form can be found here.
The code is at http://pastebin.com/TtceApu3.
Many thanks!
Thread Starter
DW83
(@dw83)
Just checking whether anyone has any advice on this.
Many thanks.
Thread Starter
DW83
(@dw83)
update: i’ve inserted an 80px text-indent which has partially solved the problem, although it results in a blank space in the comments box where there should be some text reading ‘reply’ or similar. if anyone knows where I need to go to insert this text, please advise. i’m using a child theme of twenty eleven. thanks.
Thread Starter
DW83
(@dw83)
I’ve resolved this problem now.
Using your partial solution above, or fully resolved. If it’s fully resolved, can you share?
Cheers
PAE
Thread Starter
DW83
(@dw83)
I just got rid of the customisations I’d made to my child theme’s comments.php and reverted to the default comments.php for twenty eleven. I’m not sure why this worked, I’m afraid, but it did.
The comments box still resizes when you focus into it, but I’m not too worried about this.
Thanks.
(@dw83)
14 years, 8 months ago
Hi,
I’m having some problems with my blog’s comments form. See here for an example.
If you type some text into the ‘author’, ‘email’ or ‘website’ boxes, you’ll notice two things.
Firstly, I’ve managed to mess up the setting (I think it’s the ‘z-index’?) that makes the red text disappear once you’ve typed something in here. I can’t seem to fix this.
Secondly, there’s a problem with the text that you type into the boxes. The problem doesn’t seem to appear in Chrome, but in Firefox, it’s very noticeable. The bottom of the text is ‘clipped’, so that, for instance, if you type a ‘y’ only the top half of the letter will appear, as if it were a ‘v’. I tried to fix this by inserting things like ‘overflow: visible’ and ‘line-height: normal’, etc, but I’m not really sure what I’m doing, and it didn’t help. I’ve spent days and days on this and I just can’t figure it out. Any guidance at all would be much appreciated.
Many thanks!
The css for my comments form is:
[CSS moderated as per the Forum Rules. Please just post a link to your site.]