I'm having a weird error with padding. I am creating a two-columns layout and when I try to add a padding to the footer div it takes more space than I want. I have already looked for this problem but couldn't find no useful answer.
For instance, if I put up 1 pixel on the code:
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}
I end up getting more than 1 pixel of a padding, as seen here:
The top and bottom paddings have more than 1px of height.
So my question is what could be causing this problem?
I've put up a piece of the code in a fiddle and the problem is still there, so I guess the code I've included will be enough to solve this problem, if it isn't just tell me.
Fiddle link: http://jsfiddle.net/KhxAW/4/
The issue is with your <p> tag. It has a margin space above and below. I recommend you reset the <p> tag margins somewhere in your CSS code.
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}
You aren't using pixels for your units in the padding declaration... You are using EM's. 1EM is equal to the PX size of the font of the parent element. So if your font size is 12px, 0.5em is 6px.
Just change your units to PX...
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 5px;
line-height: 1.1em;
}
Just Replace Your Footer Div With This One->
<div id="footer">
<p style="display:inline">Three Rings for the Elven-kings under the sky, seven for the Dwarf-lords in their halls of stone,
Nine for Mortal Men doomed to die, one for the Dark Lord on his dark throne, in the Land of Mordor
where the Shadows lie. One ring to rule them all, one ring to find them, one ring to bring them all
and in the darkness bind them, in the Land of Mordor where the Shadows lie.</p>
</div>
If you include the following in your code styles
p.margin
{
margin: 0px;
}
and then inside your <p> tag you include the class="margin" like this:
<p class="margin">Three Rings for the Elven-kings ... </p>
You will be able to set the padding in the <div> tag without interference
from the <p> tag.
Related
input[type="number"] field does not showing the placeholder text in latest firefox for certain font family like font-family: 'Open Sans';. The current version is Firefox Quantum 57.0.2 (64-bit)
Still don't know some font family have no such issue
Please check on the demo link https://codepen.io/anon/pen/zpqzEB
body {
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip: content-box;
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
It's your border-box property.
I'm not sure why it's happening on CodePen because it looks fine on JSBin and here on StackOverflow in the snippet you posted. Maybe it's CodePen not working great with Quantum.
Anyway, here's what's happening:
The border-box property will make it so the padding and border are included in total width and height of the element (w3schools.com).
Your input height is set to 40px. That 40px has to include the border, padding-top, padding-bottom, and the height of the element itself. Your line-height is also set to 40px. Your padding styles (you have two rules set, so it picks up the second one) is padding: .5rem 1rem;.
There isn't enough room for the input text in these 40 allocated pixels with.
Issue: 40px line height + top padding + bottom padding > 40px
As for a fix, I'm assuming you want to keep your padding and have your inputs the same size. You may need to make your font size smaller or make your inputs larger. 40px isn't enough for the padding and a 40px line height. Or you can remove that border-box property.
It kinda looks to me that the difference between this property on Chrome and on Firefox is that Chrome is ignoring the line-height. In this screenshot on Chrome, the height of the input is 22px, even though your line-height is 22px.
The root cause of the issue is that font-size is in excess of the number input controls.
Your example can be fixed preciesely by using:
padding: 0.46rem 1rem;
EXPLAINED
When padding is applied to a number type input the padding is applied to the boundaries of the box in the normal way however in some browsers cropping occurs relative to the amount of padding applied.
The cropping effect is calculated from the inside boundaries of the input arrow controls.
The cropping only affects placeholders because they are behind the input layer and become hidden when the interior boundaries of the input field are moved to cover it.
https://codepen.io/anon/pen/qpZPKd
There are various ways to avoid this however my recommendation is to avoid padding on input elements and to use alternate methods to create the desired effect.
Be an illusionist
Personally I don't see any reason to use vertical padding inside input fields. Line-height does a better job.
If you can't make the browsers do what you want make the user think the browser is doing what you want!
body {
padding: 2rem;
}
.Wrap{
box-sizing: border-box;
height: 40px;
border: 1px solid tomato;
padding: .5rem 1rem;
}
.Wrap input {
width: 100%;
height: 100%;
line-height: 40px;
border: none;
font-family: 'Open Sans';
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="Wrap"><input type="text" placeholder="Text field" /></div>
<hr>
<div class="Wrap"><input type="number" placeholder="Number field" /></div>
Codepen example
https://codepen.io/anon/pen/QaNOdo
For some reason, when I change to height of your input field to anything above 40px it seems to work. Try this:
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 41px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
I can't see why this fixes it though.
EDIT
You use two times PADDING in your css input declaration...
Just remove the first one : padding: 0 10px;
And keep : padding: .5rem 1rem;
body{
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
input[type="number"] {
// line-height: 1.5;
}
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
I have searched most of the css files, changed the logo padding in theme.css, but I cannot remove the padding on the bottom of the site logo. There seems to be a 5px padding at the bottom. Is there a way to remove this? Thanks.
Edit: Here is the code in Air theme's, theme.css file, where I can only find logo css references. Thanks again.
.logo {
margin-top: 20px;
margin-bottom: 0;
display: block;
float: left;
padding: 0px;
}
.logo a {
color: #ffffff;
font-family: 'Cinzel', 'Arvo', serif;
font-size: 12px;
font-weight: bold;
}
[[1]: http://i.stack.imgur.com/abkoc.png][1]
The problem is not a padding. The issues comes from browser's interpretation of img in <a> tag. By default all browsers render image with 3px bottom space (and it's not a margin nor padding; just an empty space).
There are 2 ways to remove it:
Float image
Display image as a block
In this case I'd choose the first option.
.logo img {
float: left;
}
I am trying to create highlighted text effect with line break(s).
Example:
I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
When adding padding it only adds padding to beginning of the text and the end, as seen here:
CSS:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Does anybody have any idea on how to make this happen?
I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break
The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:
.highlight {
color:#fff;
background:#000;
box-shadow:5px 0 0 #000, -5px 0 0 #000;
padding: 5px 0;
}
Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.
This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.
Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.
This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.
For more info see:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana, sans-serif;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break:clone;
-moz-box-decoration-break:clone;
box-decoration-break: clone;
}
<div class="box">
<h1>
<span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
</h1>
</div>
Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
you can use box-decoration-break
-moz-box-decoration-break:clone;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
working sample codepen
Just add:
If space in the text area is all you are looking for.
If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.
<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
background-color:black;
color: white;
}
#masthead h1{
text-transform:uppercase;
}
#container{
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>some sort of title goes here</h1>
</div>
</div>
</body>
</html>
Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.
Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.
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...
What do you think is the best way to organise the CSS of a site?
I wanted to have ids followed by classes. However they are not exclusive.
Example:
h4 {
padding: 5px 5px 5px 10px;
font-size: 110%;
font-weight: bold;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px 0px 5px 0px;
background:transparent url(/images/example2.jpg) no-repeat scroll left top;
text-transform: uppercase;
}
#rightcol {
padding: 0px;
width: 306px;
overflow: hidden;
float: left;
margin: 0;
border: 0;
}
#rightcol .container {
margin: 5px 6px 0 0;
padding: 5px 5px 0 5px;
background: #FFFFFF;
}
#box_info {
border: 1px solid #AAAAAA;
background: #4F4F4F;
line-height: normal;
background: #4F4F4F url("../images/example.gif") repeat-x top left;
}
#box_info.container {
margin: 10px 5px 10px 10px;
background: transparent;
padding: 0;
}
If there is a id infobox inside of a id right nav, the infobox's container will have the right nav's instead!
<div id="rightnav">
<div class="advert">
This needs to be here as sometimes I need it without borders margins etc.
</div>
<div class="container">
<div id="otherbox">
<div class="container">
</div>
</div>
<div id="info_box">
<h4>Related Info</h4>
<div class="container">
<span>Info in here</span>
</div>
</div>
<div id="yetanotherbox">
<div class="container">
</div>
</div>
</div>
</div>
So my question is: Is there a way to make them exclusive (or private if that is a better term) or a better way of organising CSS.
Cheers in advance.
edit: Just to let you know, I like putting containers in for the simple reason of width. I want 100% width but I also want to indent my containers. I find adding padding to the box then adding margin to the containers I get what I desire. If you can tell me how to do this with just one div, then go ahead although I just want a way of organising CSS better, not html (as I believe I am doing it the best it can be, but take a shot at proving me wrong :) ). Thank you :)
I think Natalie Downe has the right approach to CSS organization, which she details in her CSS Systems presentation here:
http://natbat.net/2008/Sep/28/css-systems/
The idea is that you move from the more general to the more specific in several chunks:
general styles
List item
body styles
reset
links
headings
other elements, tags
helper styles
forms
notiļ¬cations and errors
consistant items with normally just one class
page structure
skeleton including page furniture
page components
most of your styles will be in here
overrides
as little as possible goes here
In your case when you want apply the #infobox .container styles you have to override the #rightnav .container with the "!important" rule.
If you don't want any conflict between names, simply change, for example, the #rightnav .container in #rightnav .mainContainer.
I hope I've written something not so obvious.
I think trying to organize your cascade rules by class and id might be miss guided. You really should just be thinking of the actual cascade of things rather than trying to make them private.
For example the following:
#container
{
width: 600px;
margin: auto;
}
#left
{
width: 250px;
float: left;
}
#left p
{
color: Blue;
}
#left .information p
{
font: normal .83em sans-serif;
color: #000000;
}
#right
{
width: 250px;
float: right;
}
#right ul
{
font: normal .83em sans-serif;
list-style: none;
}
Will show the this:
alt text http://img188.imageshack.us/img188/1576/croppercapture5e.jpg
As you can see, there is no font face for the page itself. But as you dive deeper in the levels of the style cascade you will find that paragaphs have style defined and with the .information class you have a color blue defined on a paragraph. By thinking of what styles are needed as you dive deeper into your HTML you will see that you actually end up with less HTML and better organized style sheets.
Good luck and hope this helps.
One of the properties of cascading style sheets is that they cascade. Styles applied to parent elements also apply to their children. To change that, you will have to override the styles inherited from the parent by setting them again explicitly.
To target sub containers you could do #rightnav .container .container I think.