(this line is because SO was chopping parts off...)
Dear element-in-a-div,
Why oh why must you be ever so maddeningly off center?
I'm using the following stylesheet:
body {
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#tags {
margin: auto;
}
.tag {
margin: auto;
}
The greyish words are of the tag class, and the (invisible) box around them has the id tags.
I can't for the life of me think why "est", in this case, would be ever so slightly off center - any help much appreciated!
Thanks.
The picture:
Why oh why must you be ever so maddeningly off center?
I'm using the following stylesheet:
body {
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#tags {
margin: auto;
}
.tag {
margin: auto;
}
The greyish words are of the tag class, and the (invisible) box around them has the id tags.
I can't for the life of me think why "est", in this case, would be ever so slightly off center - any help much appreciated!
Thanks.
The picture:
It is necessary to have a specific width for elements to center them. From the code you supplied, it looks like you haven't specify the width of the div or the image.
Related
I have a h2 tag but the text isn't aligned with the left of the element as you can see on the picture.
Is it possible to remove this blank space or stick the text to the left?
Here are the CSS attributes:
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
}
:** Here is a fiddle with my problem. And if there is a solution for the top blank space it would be great.
This is standard behaviour for sans-serif fonts I believe. The glyph has extra 'room' around it for ascender/decenders/serifs AFAIK.
Codepen.io example
HTML
<h1>Decent Test</h1>
<h1 class="serif" >Decent Test</h1>
CSS
* {
margin: 0;
padding: 0;
}
h1 {
font-size: 100px;
font-family:sans-serif;
word-spacing: 1px;
padding:0;
margin:0;
background: pink;
margin: 50px;
}
h1.serif {
font-family: serif;
}
You need to add margin:0 to your body and to your h2
Example : http://jsfiddle.net/LB2N5/3/
Update your CSS like below. Hopefully it will fix the issue.
body, html{margin:0; padding:0}
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
margin:0px;
padding:0px;
}
DEMO
Just try to make the margin negative on your element like with -2px, you can adjust it to your Situation.
Previously on “let’s not support display: run-in because it’s complicated and nobody actually uses or wants to use it,” StackOverflow edition…
display: run-in dropped in Chrome?
Style a definitition list as simple key value set
CSS method instead of display:run-in; to position a block inline?
I would like the following behavior for h5 elements in my document:
It acts like run-in when followed by a paragraph (p)
It acts like block when followed by a heading (h1, …, h6) or something else (ul, etc.)
This is essentially the same behavior as run-in if the contents of headings are wrapped in (or contain) a block; i.e., by changing <h6>…</h6> to <h6><div>…</div></h6> or <h6>…<div /></h6>.
(However, I would prefer not to modify the HTML if possible: it’s generated from markdown via pandoc.)
Here’s what I have so far, using floating inline-blocks. Notice how the margin between the h5 and h6 gets “collapsed.”
CSS
/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }
/* Now let’s try to emulate `display: run-in`... */
h4,h5,h6 {
clear: both;
}
h5 {
float: left;
display: inline-block;
margin: 0 1em 0 0;
}
HTML
<h4>Section</h4>
<h5>Heading</h5>
<p>Paragraph here. This is some text to fill out the line and make it wrap,
so you can get a feel for how a heading with <code>display: run-in;</code>
might look.</p>
<h5>Heading, but without immediately following text</h5>
<h6><div>Subheading</div></h6>
<p>There should be as much space between the <h5> and <h6> as there is
between the <h4> and <h5>, but it gets “collapsed” because the
<h5> floats.</p>
<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>
Here is a jsfiddle containing the HTML and CSS.
Here is one using run-in for browsers that still support it, like Safari.
Here’s a demo page from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior.
Screenshots of Safari
Faked:
Using run-in (expected behavior, with correct margins between the h5 and the h6 or ul):
Maybe i have a compromised you would like : DEMO
/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }
/* Now let’s try to emulate `display: run-in`... */
* {
clear:left;
}
h5 {
float:left;
display: run-in;
margin: 0 1em 0 0;
}
h5:after {
content:'.';
position:absolute;
background:inherit;
width:100%;
right:0;
z-index:-1;
}
body {
position:relative; /* to include defaut margin of body to draw h5:after element within body */
}
p /* + any other phrasing tag you wish */ {
clear:none;
background:white;
}
I have an issue with my page centering. Everything centers correctly except the left and right border.I believe the issue is with the border-right-width:300px; border-left-width:300px; lines but I am not sure of another way to set that up. Is there another solutuion to having a left and right border that also centers with the page. Any ideas?
Here is my CSS:
body {
margin:auto;
padding: 0;
background: #FFFFFF;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-right-style:solid;
border-left-style:solid;
border-right-width:300px;
border-left-width:300px;
border-color:#E8E8E8;
}
When you use margin:auto you must also specify a width. I think you are trying to center the contents of the body with a background #E8E8E8. Do this instead
body {
margin:auto;
padding: 0;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 1020px; //or anything else you want
background:#E8E8E8;
}
You cant center anything that has no width, or is the parent-div with 100% because it cant relate to anything.
If you are going to use your body you need something like this:
body{
width:980px;
height:100%:
}
what most people do is using a container or wrapper. That gives you bit more control.
.container{
width:980px;
height:100%;
position:relative;
}
as you can see I gave the container as classs and a position:relative. This allows you to use it multiple times on the same page.
You need to center div itself, something like this:
div.page {
margin: 0 auto;
}
I use this reset.
* {
font-family: Arial, Helvetica, sans-serif;
outline: 0;
padding: 0;
margin: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
white-space: normal;
line-height: 1;
}
hr {display: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
blockquote, q {quotes: "" ""}
ul {list-style-type: none}
ol {list-style-type: decimal}
a {text-decoration: none}
.clear {clear: both}
The problem is that as long as I use line-height: 1 I see an extra pixel that does not go away no matter what I do in my block links even I tried setting height, line-height, font-size for it. nothing works. Please tell me what's going on with firefox line-height.
This is my css.
.tag {
display: block;
font-size: 11px;
background: #fff;
border: 1px solid #aaa;
color: #555;
text-transform: lowercase;
padding: 3px 6px;
}
Pretty simple yea? Seems not. Firefox will create a pixel on top of text I can clearly see it its not balanced even though I set top and bottom padding the same. Someone tell me why this happens, if I remove the line-height: 1 from my reset a whole lot of other things get screwed up.
Try using line-height: normal;
This tells it to keep the same height as the text (which would seem to be the same as line-height:1 but perhaps firefox treats it differently).
I don't get it, I see no space using your CSS above, im using firefox 3.6.13
Maybe see if you can recreate a mock up of your issue on JSbin?
http://jsbin.com/ajinu3
I have a reset.css style sheet that looks like this,
HTML * {
margin: 0;
padding: 0;
padding: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
text-decoration:none;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size: 83%;
}
ul,
ol,
li {
list-style:none;
}
a,
hover,
visited {
color:#06508b;
}
a,
img,
fieldset {
border: 0;
}
Now this should make my content sit flush with the top of the browser window however it is not, can anyone see a reason for this? You can see the problem here http://www.ibdnetwork.co.uk
It looks to me that you're reset stylesheet is correctly removing the margin and padding on the body element. This leads me to think that it's something inside the body that is pushing your content out of position.
After a quick look in firebug...
It looks like your style on line 20 of default.css needs to be:
h1 {
font-size:28px;
}
Just remove the margin-bottom:25px.