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?
Related
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>
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
}
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;
}
I have built web site (www.dubovik.org it's on russian, but it's not relevant to the issue) everything looks quite ok except on mobile Safari (on iphone and ipad). Only one h2 (with phone numbers) has blue color instead of white (as other h2's).
This is html with problematic heading:
<h2 class="heading" id="left">694-29-29 <br> 7-911-922-35-97</h2>
And css:
h2 {
clear: both;
color:#444444;
text-align: center;
font-size: 1.2em;
font-family: Helvetica, italic;
}
.heading {
width: 650px;
color: #fff;
text-align: right;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
line-height: 1em;
}
#left {
position: absolute;
top: 335px;
left: 1.5%;
z-index: 5;
float: left;
width: 500px;
color: #fff;
text-align: left;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
font-size: 3.5em;
line-height: 1em;
}
Tried everything (style it differently, give it different classes and id's and style them differently) - mobile Safari renders h2 heading with phone number in blue color.
Thanks for your help!
iOS automatically makes telephone numbers into links. You can stop it from doing that like this:
<meta name="format-detection" content="telephone=no">
Or you can keep the number as a link and style it like this:
a[href^=tel]{
color:inherit;
}
You could try this:
color: #fff !important;
My font titles with cufon are cut on top and moved up, any ideea?
Maybe it's a css problem, I don't know, but I could not figure out.
http://www.quotestemple.com
Add a 3 pixel margin to the top of the h3 elements:
h3 {
font-size: 25px;
color: #281c17;
letter-spacing: -1px;
line-height: 1.2em;
margin: 3px 0 27px 0;
}