Considering the next code:
.test {
position: relative;
padding: 0;
margin: 0;
border: 0;
background: initial;
font-size: 11px;
border: 1px solid black;
margin-left: 20px;
}
.test::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: red;
}
<button class="test">Some Text Content</button>
In Chrome it's rendered like (hot it is required):
In Safari it's rendered like:
So, in Safari it's not vertically centered and the block has different size.
The main question is how to center it vertically in Safari?
The secondary question is how to make blocks absolutely similar?
I tried display: flex; align-items: center;, vertical-align: center;, changing line-height – nothing from that seemed to work...
.btn {
border:1px solid #000;
box-sizing:border-box;
color:#000;
display:inline-block;
font:1rem/1.5 sans-serif;
height:2rem;
padding:0 1rem;
text-align:center;
vertical-align:middle;
width:auto;
}
Related
I've got some text that needs the following:
border around the text
a ::before element that has its own border and background color
Basically, I want it to look like this:
So far, I've got this:
My CSS:
.caution {
border: 0.5pt solid black;
padding-left: 3pt;
padding-right: 3pt;
display: table;
}
.caution::before {
display: table-cell;
border: 0.5pt solid black;
background-color: #deddde;
text-align: center;
content: "caution";
}
My html:
<p class="caution">Caution text</p>
The result is that the ::before box is nested inside the .caution box, instead of overlapping. The gaps on the left and right are caused by the padding-left and padding-right statements.
I've also tried this without the display:table, that didn't help. I need the padding-left and padding-right to apply to the text (to ensure the text doesn't come right up to the border), but not to the ::before element. There's no selector that allows me to apply properties to 'all of .caution except the ::before element'.
How can I get the borders to behave the way I want them to?
You can try this - it's not perfect, but it's a start :)
.caution {
border: 0.5pt solid black;
display: inline-block;
max-width: 200px;
padding: 10px;
}
.caution::before {
display: block;
border-bottom: 0.5pt solid black;
margin: -10px;
margin-bottom: 10px;
background-color: #deddde;
text-align: center;
content: "Caution";
}
It will render the following:
Setting only border-bottom (as in answer by Yogendra Chauhan, though I only noticed that afterwards) can help:
.caution {
border: 0.5pt solid black;
padding-left: 3pt;
padding-right: 3pt;
display: block;
}
.caution::before {
border-bottom: 0.5pt solid black;
background-color: #deddde;
text-align: center;
content: "caution";
display: block;
margin: 0 -3pt;
}
However, you might see a small white line at the ends of the bottom border when you zoom to 6,400% in your PDF viewer.
Here is the working example:
.caution {
position: relative;
border: 1px solid #000000;
height: 200px;
width: 300px;
padding-left: 5px;
padding-right: 5px;
padding-top: 30px;
}
.caution::before {
position: absolute;
background-color: #deddde;
text-align: center;
content: "caution";
text-transform: capitalize;
display: block;
width: 100%;
border-bottom: 1px solid #000000;
top: 0;
left: 0;
line-height: 25px;
}
<div class="caution">Caution text</div>
I am trying to achieve something as close to the image below as possible.
I currently get the following with the code below and can't seem to quite get it to do what I need.
Current Styling:
My CSS:
hr:after {
background: url('../img/green_leaf.png') no-repeat top center;
content: "";
display: block;
height: 18px; /* height of the ornament */
position: relative;
top: -9px; /* half the height of the ornament */
border: 0;
color: #d7d7d7;
}
I Would like to thicken the line, and if possible, add space around the image (without making the green_leaf.png have a white bg).
How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.
Working Example:
hr {
background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;
background-size: contain;
display: block;
height: 18px;
border: 0;
position: relative;
}
hr:before,
hr:after {
content: '';
display: block;
position: absolute;
background: #d7d7d7;
height: 2px;
top: 8px;
}
hr:before {
left: 0;
right: 50%;
margin-right: 10px;
}
hr:after {
right: 0;
left: 50%;
margin-left: 10px;
}
<hr />
You can find the answer in this post Custom <hr> with image/character in the center
I modified it and I got this:
hr {
no-repeat top center;
text-align: center; /* horizontal centering */
line-height: 1px; /* vertical centering */
height: 1px; /* gap between the lines */
border-width: 1px 0; /* top and bottom borders */
border-style: solid;
border-color: #676767;
}
hr:after {
content: ""; /* section sign */
background: url('smiley.gif') no-repeat top center;
display: inline; /* for vertical centering and background knockout */
background-color: white; /* same as background color */
padding: 0 2em; /* size of background color knockout */
}
Pay attention to padding: 0 2em; and background-color: white;.
If you set it up like this, and specify background color on the image to match whatever you have in the background of the page (probably white) it will look good:
HTML
<div class='hr'>
<hr>
<img src='../img/green_leaf.png' alt=''>
</div>
CSS
hr {
border:none;
border: 1px solid #d7d7d7;
}
.hr {
text-align: center;
}
.hr img {
position: relative;
top: -18px;
background:white;
padding:0 5px;
}
Result:
Fiddle
I'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>
I have a DIV which is displayed on top of images of items that are for sale on a portfolio website. This works fine in standard browsers, but when it comes to older browsers (the dreaded IE) for some reason the DIV is pushed to the right.
Any help would be appreciated
This is the code for the for-sale banner;
.post .forsale {
width: 70px;
height: 75px;
position:absolute;
margin-top: -10px;
margin-left: -8px;
display: none;
background-image: url(images/fs.png);
background-repeat:no-repeat;
}
This is the code for .post
.post {
text-align: center;
overflow: hidden;
width: 200px;
height: 380px;
border: 1px solid #ccc;
-webkit-border-radius: 10px;
border-radius: 10px;
display: inline-block;
margin: 0 10px 62px;
background: #e0e0e0;
vertical-align: top;
*display: inline;
zoom: 1;
}
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.