I think the main problem is that I'm confused about the padding, border and margin interactions.
I have read about each of these style attributes on their own but I'm having trouble combining all of them successfully inside of a table.
For one, I'm setting attributes on the contents in the cell, and then on the cell themselves. I'm not sure when to do which.
For two, I can use percent or pixels. For my needs I think percent would work well, since the text in the orange box is going to be of variable lengths (as will the header text).
Now, the part of the code that I can't get to work correctly is that the display: inline-block element (including padding, border, and margin) overflows the cell. Obviously I want the first header to be centered over the contents below, and I want each of the orange buttons to be visually centered with a small margin between them and the cells to the right.
I see there's a box-sizing style solution, but I need this to be compatible with IE6.
http://codepen.io/kokeefe/pen/dMmPMp
a.TableButtonStyle:link {
display: inline-block;
border-style: solid;
border-width: 3px;
border-color:rgb(240,80,40);
border-radius: 10px;
vertical-align: middle;
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
color: white;
text-decoration:none;
background-color: rgb(240,80,40);
font-weight: bold;
width: 100%;
padding: 5%;
font-size:14pt;
}
a.TableButtonStyle:hover {
background-color: white;
color: rgb(240,80,40);
}
a.TableButtonStyle:active {
background-color: rgb(213, 57, 15);
color: white;
border-style: solid;
border-width: 3px;
border-color: rgb(213, 57, 15);
}
a.TableButtonStyle:visited {
background-color: rgb(213, 57, 15);
color: white;
border-style: solid;
border-width: 3px;
border-color: rgb(213, 57, 15);
}
.FontFormat{
text-align:center;
vertical-align:middle;
font-size: 13pt;
margin: 5px;
}
.Bold
{
font-weight: bold;
}
Updated CodePen
What you need is:
box-sizing: border-box;
Apply this to a.TableButtonStyle.
Quoting from MDN docs:
border-box:
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
CSS box-sizing property MDN docs
Related
I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML
<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>
and the below style
#personName {
display: block;
}
#moreInfo {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
font-weight: bold;
font-style: italic;
display: inline-block;
}
The problem is I also have this style
* {
box-sizing: border-box;
}
which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.
That's because box-sizing: border-box includes both the border and the padding in the height computations.
Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.
In your specific case, you can increase the height and width to the following to make it look like you want to:
width: 57px;
height: 57px;
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.
#moreInfo {
...
padding: 0;
font: 30px Arial, sans-serif;
...
}
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
I need to give a link background styling. As the width will vary I need to use 2 images, which is why I have a span within my link.
Ive also needed to float the link left, which means I have to set paragraphs to clear both.
My solution works but it seems like a lot of css and adding extra html elements. Is there a more elegant solution?
http://jsfiddle.net/p9aXg/16/
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<a href="#" class="my-link"><span> This is a link sdafsdafsdaf </span>
</a>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
line-height: 50px;
float: left;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
height: 49px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
p {
clear: both;
}
If you use "display;inline-block" instead of floating, you can remove a bit of the CSS.
See the updated fiddle here: http://jsfiddle.net/p9aXg/19/
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
display:inline-block;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
line-height: 50px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
As a general styling note, you should always try to avoid floating if you can. When you float an element, it takes it out of the flow of the page. This typically forces you to float other elements to make them line up as if they were in the flow of the page. I've seen it snowball to the point where every element is floated, which is simply an unnecessary headache.
Using inline-block instead of float will work most of the time. See the following links for more information:
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
http://www.vanseodesign.com/css/inline-blocks/
http://www.ternstyle.us/blog/float-vs-inline-block
It's possible to do this with no images and no extra elements, if you embrace 'progressive enhancement' across the range of browsers which you support. Here's an example: http://jsfiddle.net/Rt2Wa/4/
This uses CSS3 techniques to achieve a result that's as nice as your example in modern browsers, and produces a flat-but-beveled link in IE 7 & 8.
There are a few techniques at play here:
display: inline-block (mentioned by Ryan Henderson - very useful!)
border-radius
background gradient
:after pseudo-element
CSS triangles (created with a border effect).
Here's the basics of the effect (see the fiddle for a version with the vendor-prefixed styles where applicable):
a:link {
background-color: #18A580;
background: linear-gradient(to bottom, rgba(29,186,144,1) 0%,rgba(24,165,128,1) 100%);
box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.35), inset 0px 0px 1em 0px rgba(255, 255, 255, 0.4);
border-radius: 0.3em;
border-top: 1px solid #67D0BF;
border-bottom: 1px solid #18805B;
color: #FFF;
display: inline-block;
padding: 0.45em 0.75em;
text-decoration: none;
margin-bottom: 0.8em;
}
a:link:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.25em 0 0.25em 0.5em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
I would use one background image and make it adjust
DEMO jsFiddle
a {
background-image: url("image.jpg");
background-repeat:no-repeat;
background-size:90% 70%;
background-position:center;
line-height: 50px;
padding:20px;
}
I'm trying to move the "likes" gray bar right above the signature, to the left of the "like" link found on top right w/ tiny icon.
Example:
http://www.talkjesus.com/bible-study-hall/44722-antimonianism.html#post220422
The css code now
.vbseo_buttons .vbseo_liked {
background: rgba(46, 53, 57, .8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
display: block;
padding: 12px;
margin: 5px 30px;
<vb:if condition="$stylevar['textdirection'] == 'rtl'">
background-position: right;
</vb:if>
}
If I change display: block to display: inline, it'll move it to the same row, like this:
http://i49.tinypic.com/348lonc.png
However, it loses the margin property and width property. I tried fixing the width by adding width: 50%; but that changed nothing. How can I keep it inline while fixing margin and width?
Do you mean your want the gray bar at the far top right where it shows the quantity of likes the thread has with the heart? To keep the margin you should just float the gray box
Floated left
.vbseo_buttons .vbseo_liked {
background: rgba(46,53,57,.8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
padding: 12px;
margin: 5px 30px;
float: left;
}
To move this all the way to the top right you would need to modify the template and it would end up looking something like this but you need to move the entire after_content div or restyle it as needed if only moving the vbseo_liked container. And also remove the clear:both style.