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;
}
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:
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
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;
}
In my fieldset I have labels next (side) to my textboxes, but for some reason, they are towards the top and not middle. Here is my CSS for the fieldset:
fieldset {
clear: both;
font-size: 100%;
border-color: #000000;
border-width: 1px 0 0 0;
border-style: solid none none none;
padding: 10px;
margin: 0 0 0 0;
}
label
{
font: bold 12px Verdana, Arial, Helvetica, sans-serif, MS UI Gothic;
float: left;
width: 12em;
text-align:right;
vertical-align:text-bottom;
}
What am I missing?
Try adjusting the line-height property for the label element. You may need to increase or decrease it.
To me this is the most frustrating thing about css...
Zack is right it will probably take some tweaking with the line-height, sometimes lots of tweaking (like 20px). i think that floating the element causes line height to be difficult??
if you want it in the middle of the line you should set vertical-align:middle; too.
hope this helps...