Here is my fiddle:
http://jsfiddle.net/schmudde/VeA6B/
I cannot remove the top and bottom padding on either side of a font awesome icon:
span {
border: 1px solid red;
line-height: 40%;
}
i {
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
I have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.
Use span { line-height: 100%; } so it would fill the block.
The line-height on the span won't help you much as the icon is added to the pseudo class :before on the <i /> tag. This pseudo class will create a somewhat hidden element, if you can call it that.
So if you want to override the css:
.icon-check:before { font-size: 2rem; }
Removing the padding of the icon can be tricky. Maybe if you set the span to display: inline-block you can use height, width in combination with overflow: hidden.
span {
border: 1px solid #FF0000;
display: inline-block;
height: 38px;
overflow: hidden;
position: relative;
width: 45px;
}
i.icon-check:before {
left: 0;
position: absolute;
top: -4px;
}
DEMO
You set borders in span, and line inheriting line-heights in i, that's the problem.
just add borders to i :
span {
line-height: 40%;
}
i {
border: 1px solid red;
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
Fiddle
Related
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
I have this div wedged between two bars(other divs), though when I add text into the equation, the div gets repositioned down. It works as intended without the p element and its children. Here's a fiddle to demonstrate the issue: http://jsfiddle.net/57uSQ/
this is the HTML that is causing the problem:
<p>
<span class="name">DOLCE & GABBANA</span>
</br>
<span class="title">THE ONE</span>
</p>
And the correlating CSS:
.videoDesc {
display: inline-block;
border: 1px solid #000000;
border-right: 0px;
height: 200px;
width: 500px;
}
.videoDesc p {
display: inline-block;
margin: 0;
padding: 0;
}
.videoDesc .name {
display: inline-block;
padding: 0px;
}
.videoDesc .title {
display: inline-block;
padding: 0px;
}
.title {
font-family: Lekton;
font-size: 1.25em;
}
.name {
font-family: Oswald;
font-weight: lighter;
font-size: 2.5em;
letter-spacing: 10px;
padding-left: 5px;
}
You need to add vertical-align:top to .videoDesc:
.videoDesc {
display: inline-block;
border: 1px solid #000000;
border-right: 0px;
height: 200px;
width: 500px;
vertical-align:top;
}
jsFiddle example
The default vertical alignment is baseline, which is causing the behavior you see.
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>
I using Twitter's Bootstrap and this color picker: http://bootstrapformhelpers.com/colorpicker/.
And I'm having an issue with these div/span/input created by library.
It uses bootstrap classes the apply display: table to div, display: table-cell to span and display: inline-block to input.
I've overwritten some CSS attributes to get my expected layout, testing it in Chrome.
However, it does not work as expected in IE9 and Firefox. Works as expected in Chrome, Opera, IE10 (and IE9#IE10).
I've reproduced it in jsFiddle, here is the important code:
HTML:
<div>
<span class="btn">
<span></span>
</span>
<input type="text" />
</div>
CSS:
body {
line-height: 20px;
}
div {
display: table;
position: relative;
width: 140px;
}
span.btn {
background: #ccc;
display: table-cell;
padding: 6px 12px;
position: relative;
left: 90px;
}
span.btn > span {
background: #333;
display: block;
height: 16px;
width: 16px;
}
input {
border: 1px solid #ccc;
display: inline-block;
height: 20px;
margin-left: -42px;
padding: 6px 12px;
width: 100%;
}
Why this is exactly happening? Every browser interpreting display: table/table-cell differently?
What is the cross-browser solution?
Because Firefox doesn't support position: relative; on table cells...
Bug Report
The issue is that you are actually having some really weird markup and CSS positioning, you should consider nesting an absolute positioned element under a relative positioned parent.
Demo
Demo 2 (With a center black box)
div {
position: relative;
width: 180px;
border: 1px solid #ddd;
margin: 20px;
height: 30px;
}
div input {
padding: 6px;
}
.btn {
position: absolute;
height: 30px;
width: 30px;
background: #aaa;
right: 0;
top: 0;
}
I'm trying to make my search bar have a fluid input field width, whilst also having a 'search' button next to it.
It seems that the input field .search is way bigger than the containing element called .navigation-right, and it causes the button .search-submit to be pushed out of the containing div. See images below.
The Issue:
What I'm trying to make it look like:
Here is my code: (for convenience I left out the margin & padding values)
CSS
.navigation-right {
width: 282px; min-width: 282px;
height: 50px;
display: table-cell;
vertical-align: top;
border: 1px solid #920000;
}
.search {
width: 100%;
height: 30px;
display: table;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
}
HTML
<div class="navigation-right">
<form class="search">
<input class="search-input">
<button class="search-submit"></button>
</form>
</div>
Replace below class
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
Is there a specific need of using display: table; and display: table-cell;? It reminds me of the days when the only way of coding was using tables...
If I may suggest an alternative way of doing the same thing and arguably doing it better :) - the input element will occupy 100% of its parent with the button having a fixed width (good for fluid or responsive layouts).
You have set your search field (.search-input) to have a 100% width, so that will fill its parent. You need to reduce the width to around 250px
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
float:left;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
position:relative;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
position:absolute;
float:left;
}