Re: [css-d] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
In the Name/Email inputs, the tops of the text Name and Email are cut
off (Firefox 4 / Ubuntu). I think the reason for this is for the computed
font size ( 25.13 px), the line height is 32px. However, only 17px space is
available. If you increase the height of the input element to 44px, and
move the background image (border image) vertically by 6px and remove the
bottom margin, everything will be OK.
.sof-email-form input {
-moz-box-sizing: border-box;
background: url(../images/email-form-input-bkg.png) no-repeat scroll
0 6px transparent;
color: #88;
display: block;
font-family: Little Days;
font-size: 1.571em;
font-weight: bold;
height: 44px;
margin: 0 auto;
padding: 9px 4px 3px;
width: 231px;
}
At least, it looked fine in Firefox 4 with Firebug. Let me know if it works.
Regards,
Chetan Crasta
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
Hi Everyone, I still need help w this issue (please see previous post copied/pasted below). One suggestion given, didn't exactly work and no further explanation was provided. Any one know why this is happening and how I can resolve it? Once again TIA! Elli Subject: [css-d] @Font-Face Font Chopped OFF by Padding Hello Gang, I'm using a custom font for the input values of a newsletter sign-up form (found in the sidebar) and the top of the font gets cut off, despite the fact that I've declared the box-sizing to border-box. If I use the default content-box value and adjust the height to accommodate the padding it still gets cut off, though less in FF3.6. The other thing I notice, is that I get different results in different browsers. it doesn't push the text down to where I want it (in Chrome and FF), I'd like the text to sit somewhat in the middle of the input field's vertical space. But in IE9 it pushes it down to the bottom border of the background image. I've never encounter this issue before with padding but I'm guessing it's due to the input element itself? I did declare the element to display: block. http://www.e7flux.com/clients/sof/ Suggestions on how I can rectify this more than welcome! TIA! Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
Assuming you mean the Name/Email inputs, I see the bottom, not the top, is chopped in Chrome/Mac with the font Little Days. With the font-family disabled (falling back to Candara I think) and with padding disabled, the text is somewhat centered. Is this what you mean in your description? Canot compare it to IE9, but in Chrome, the text in the inputs is pushed to the bottom. On Tue, Dec 20, 2011 at 7:00 PM, Elli Vizcaino elli...@yahoo.com wrote: Hi Everyone, I still need help w this issue (please see previous post copied/pasted below). One suggestion given, didn't exactly work and no further explanation was provided. Any one know why this is happening and how I can resolve it? Once again TIA! Elli Subject: [css-d] @Font-Face Font Chopped OFF by Padding Hello Gang, I'm using a custom font for the input values of a newsletter sign-up form (found in the sidebar) and the top of the font gets cut off, despite the fact that I've declared the box-sizing to border-box. If I use the default content-box value and adjust the height to accommodate the padding it still gets cut off, though less in FF3.6. The other thing I notice, is that I get different results in different browsers. it doesn't push the text down to where I want it (in Chrome and FF), I'd like the text to sit somewhat in the middle of the input field's vertical space. But in IE9 it pushes it down to the bottom border of the background image. I've never encounter this issue before with padding but I'm guessing it's due to the input element itself? I did declare the element to display: block. http://www.e7flux.com/clients/sof/ Suggestions on how I can rectify this more than welcome! TIA! Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
On Tue, Dec 20, 2011 at 1:00 PM, Elli Vizcaino elli...@yahoo.com wrote: Hello Gang, I'm using a custom font for the input values of a newsletter sign-up form (found in the sidebar) and the top of the font gets cut off, despite the fact that I've declared the box-sizing to border-box. If I use the default content-box value and adjust the height to accommodate the padding it still gets cut off, though less in FF3.6. The other thing I notice, is that I get different results in different browsers. it doesn't push the text down to where I want it (in Chrome and FF), I'd like the text to sit somewhat in the middle of the input field's vertical space. But in IE9 it pushes it down to the bottom border of the background image. I've never encounter this issue before with padding but I'm guessing it's due to the input element itself? I did declare the element to display: block. http://www.e7flux.com/clients/sof/ Chrome / Mac it's cut off on the bottom. Firefox / Mac it's cut off on the top. In both cases removing the height fixes the problem in both cases. Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
Assuming you mean the Name/Email inputs Yes this is what I mean. Chrome / Mac it's cut off on the bottom. Firefox / Mac it's cut off on the top. In both cases removing the height fixes the problem in both cases. Tim Removing the height does not exactly fix my problem for 2 reasons, it makes the height of the input fields taller than I designed them to be and causes the vertical spacing between the input fields to increase which is not how I designed that element either. If I revert to box-sizing: content box then the dashed background image gets chopped off. Since the latter is the default for padding behavior I usually use this but for these elements it's just not working and the reason why I chose to go w box-sizing border-box. Seems like either way something gets chopped off but just for these elements. I'm padding Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
