Im using Contact Form 7 on my WP site, and I'm experiencing a strange issue with the submit button. Im using the following class for the button:
.ctaredbutton
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 22px 30px;
text-transform: uppercase;
margin-left:20px
The button displays as expected in Firefox (http://cl.ly/SQ5Y) but there appears to be extra padding in Chrome (http://cl.ly/SPcr). The form is live at 'elitegolfusa.org/apply'
Has anyone seen this before? I've got no idea where the additional top padding has came from?
Ditch the padding on the top/bottom altogether and use line-height. Set line-height to whatever height you want the button.
.ctaredbutton{
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
line-height:45px; // I added this
padding: 0 30px; // I changed this
text-transform: uppercase;
margin-left:20px
}
Related
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
See the example snippet below of a text using two box-shadow: inset as underline.
It renders perfectly on Chrome, Firefox and Safari (recent versions).
But it looks like this on Edge (see the faded line leaking at the bottom of the underline):
QUESTION
Is there any way around this? Or should I just give Edge users what they deserve?
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60,128,124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
a.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
padding-bottom: 3px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
https://gs.statcounter.com/browser-market-share/all/europe/#monthly-201810-201910-bar
I reproduced the issue in Microsoft Edge(EdgeHTML). I think it might be due to the different performance of different browser's render engine. Besides, I found a similar issue report, you could also report this issue. The situation of another issue report is also similar.
You could try to avoid using two inset box-shadow in Microsoft Edge(EdgeHTML) and use the code below as a workaround:
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60, 128, 124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px 0 rgb(60, 128, 124);
padding-bottom: 1px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
There is an embedded form on this WordPress page (by a third party plugin, Genoo) in which I'm trying to re-style. All has gone well aside from the submit button at the bottom. The button should have white text with a black background.
https://lfccworkforce.com/funding-options/fastforward/
It displays fine in Chrome:
Chrome Sreenshot
But in Safari it does not:
Safari Screenshot
I appreciate everyones help!
e.genooForm {
all: unset;
}
.genooForm label {
font-size:.9em;
font-weight: bold;
font-family: Arial, Sans-Serif;
}
.genooForm input.ext-form-input {
border: solid 1px #757575;
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}
.gn-component--selected {
all: unset;
width: 30% !important;
margin: auto !important;
}
.gn-btn {
all: unset;
text-align: center;
padding: 10px;
background: #000 !important;
color: #fff !important;
font-size: 1em !important;
font-weight: bold !important;
border-radius: 10px !important;
text-decoration: capitalize !important;
}
.gn-btn:hover {
background:#0176C0 !important;
}
.gn-generated .gn-form .gn-btn {
color: rgb(255, 255, 255) !important;
}
#www139 had the answer:
I suggest removing the all:unset; property. Only Safari 9.1 and later support it. Edge doesn't support it at all. Since it resets properties to initial, Safari might be interpreting that property differently from Chrome and setting the color of the button to its default.
I want to create a styleguide for a website, and say I have a h1 I always want there to be 28px bottom margin before the next text whatever it is, from the foot of the letters to the top of next letters. Problem is that in HTML if the line-height's always add some extra spacing, and it might differ for each text. Is there a rule to know exactly how much margin-bottom to use so it will always be 28px for example?
<h1>HL1: Meine Bestellungen</h1>
<h2>SL1: Bestellnr. 1234563</h2>
h1 {
background: none repeat scroll 0 0 rgb(255, 255, 0);
color: rgb(153, 145, 141);
font-family: Georgia;
font-size: 26px;
font-weight: normal;
letter-spacing: 0;
line-height: 30px;
margin-bottom: 28px;
text-decoration: none;
text-transform: uppercase;
}
h2 {
background: none repeat scroll 0 0 rgb(0, 255, 0);
color: rgb(196, 18, 47);
font-family: Lucida Sans;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 20px;
margin-bottom: 6px;
text-decoration: none;
text-transform: uppercase;
}
Thanks!
It's got nothing to do with line height, it's got to do with browser defaults.
For instance in my version of Google Chrome there is a margin-top value applied to the h2 by default. You should just specify all margins:
h1 {
margin: 0 0 28px; /* shorthand notation */
}
h2 {
margin: 0 0 6px;
}
Look into a "CSS reset", and in jsFiddle you can check the "Normalize CSS" option.
Reources:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
CSS reset - What exactly does it do?
I've been racking my brains out to fix this but I am not an HTML/CSS expert so I'm out of my wits.
The placeholder text is shown too high from the center of the input box element.
See the following image:
How can I fix this? You can see them live at http://siliconalley.com. When you type inside the input, it actually looks alright. It's just the placeholder that is looking weird.
Your current line-height is 1, change it so it is equal to the height of your element and it becomes centered.
line-height: 30px;
Your line-height:1; declaration is causing the problem. Remove this for .navbar-search .search-query and it should be fine.
You can force the line-height style the value of auto, with that u will fix the problem in Chrome and won't mess up in IE. I've tested on FF, Chrome and IE
.search-query {
line-height: auto !important;
}
your CSS is looking Like this
Actually it is line-height problem
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Change to Like this
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 21px; /**change the Line-height to like this**/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}