http://jsfiddle.net/k8s4j/6/
Given the fiddle above, I am stuck... In Chrome it claims that the bottom elements have allot of padding somehow, but I can't seem to identify where it originates from.
In any case, I need "HIGH" to be placed inside the box.
Please view this in Chrome btw, because it is meant for a Chrome plugin, so other browsers won't make sense atm.
There is properly some superfluous padding and margin declarations in the CSS... I basically just tried adding explicit margin and padding all over to see if I couldn't find the sinner.
Since .priorityheader_priority has display: table-cell;, you need to also give it vertical-align: top; for the desired alignment.
Hear is the working DEMO
just change the following CSS:
.priorityheader_priority {
border-left: 1px solid black;
display: table-cell;
vertical-align:top;
width: 112px;
padding: 0; margin: 0;
}
.priority {
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
display: block;
text-transform: uppercase;
font-size: 120%;
padding: 0; margin: 0;
}
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
I am trying to move my footnotes to the very left of the page instead of the default block indentation, but am not having success. Here is the relevant code:
.footnote {
font-size: 0.75em;
display: none;
display: footnote;
display: prince-footnote;
position: footnote;
counter-increment: footnote;
footnote-style-position: inside;
margin: 0 0 5px 5px;
padding-left: 10px;
text-indent: -10px;
line-height: 1.4;
text-align: left; }
Any help is appreciated.
It seems you have used a display element that is redundant, also try floating the element to the left.
float:left;
if this doesn't work, please post the html so we can see what your dealing with:)
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}
I've read about postion:absolute problems and tried almost every possible solution. Including positioning divs relatively, wrapping them in a relatively positioned parent etc etc, but it didn`t help.
I'm drawing a table and after that im putting divs in it in a specified place. Table (grid) prints fine but places where divs should be are printed in slightly different color and divs aren`t there. In chrome it prints ok. Has anyone managed to find a solution yet? Maybe I'm doing something else wrong?
My css:
body
{
margin: 0px;
padding: 0px;
font-family: Verdana;
-moz-user-select: none;
}
.grid
{
height: 100%;
border: 1px solid;
border-collapse: collapse;
}
.grid tr
{
text-align:center;
border-bottom: 1px dashed;
cursor: cursor;
}
.grid td.hourCell
{
width: 100px;
vertical-align:top;
font-size: 10px;
font-weight: 500;
height: 60px;
}
.grid th.hourCell
{
width: 100px;
}
.grid th
{
font-weight: bold;
height: 20px;
width: 200px;
font-size: 12px;
font-weight: 500;
font-family: Verdana;
border-right: 1px solid;
background-repeat: repeat;
cursor: cursor;
}
.grid td
{
height: 30px;
width: 200px;
vertical-align: top;
}
.div_which_doesnt_print
{
padding: 0px;
margin: 0px;
width: 200px;
font-size: 10px;
font-family: Verdana;
height: 0px;
position: absolute;
border-style: solid;
border-width: thin;
overflow: hidden;
opacity:0.7;
z-index: 3;
}
Every help would be greatly appreciated! Even reassuring me that solution is still unavaible.
EDIT: It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
If you are Inserting the Divisions Inside the Table Cells, then just give the Cell TD/TR position to relative and then give absolute positioning to the div inside it.
This was working fine for me in few projects.
I hope this helps.
My aim is have the text inside this div displaying in the middle of it's container cross-browser.
If I could achieve this it would enable me to use fewer images.
http://jsfiddle.net/tMFaD/
Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the '1' is higher up on firefox).
Can this be easily done?
UPDATE: This is the small difference that i'm trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E
UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.
You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.
You can do it in a couple of ways:
.box {
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
}
.box {
width: 80px;
height: 80px;
font-size: 44px;
line-height: 80px;
font-weight: bold;
color: white;
background: pink;
text-align: center;
}
Both will produce the same results:
http://jsfiddle.net/spacebeers/s9Urm/8/
EDIT: To get the level or cross browser/cross OS precision you're after I think you're going to have to use separate style rules for some of them or just use images.
OTHER suggestion, use line-height to control vertical middle instead of padding:
.box {
display:block;
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
float: left;
line-height:80px;
width:80px;
height:80px;
}