In Firefox the SVG icon won't display. It is displayed in every other browser. Any idea why? Is this not meant to be supported?
HAML
.contact-form__error
.contact-form__error--icon
.contact-form__error--text Something went wrong. Please try again later.
CSS
.contact-form__error {
color: red;
font-size: 12px;
margin-top: 5px;
position: absolute;
line-height: 1em;
}
.contact-form__error--icon {
// content: image-url('icons/alert_error.svg');
content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg==');
width: 15px;
height: 15px;
vertical-align: text-bottom;
margin-right: 4px;
display: inline-block;
}
.contact-form__error--text {
display: inline-block;
vertical-align: middle;
}
http://codepen.io/Lightheaded/pen/NGZWyj
Attach it on :before or :after instead
.contact-form__error--icon:before {
content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg==');
}
http://codepen.io/anon/pen/WQqbbM
Related
I'm looking for the HTML code to create a short horizontal line centered inline with text (in a particular typeface) like the image.
Currently, the code I have is:
<span style="font-family:'Taner Ardali Antikor Mono Medium';">MY MISSION</span>
Note: I'm using this code for a text markdown or code block on my Squarespace site. I'm unfamiliar with coding, so not sure if that makes a difference.
You can use :after selector for this
.title {
font-family:'Taner Ardali Antikor Mono Medium';
font-size: 30px;
display: block;
}
.title:after {
content:"";
display: inline-block;
height: 2px;
width: 100px;
margin-left: 10px;
background: #111;
vertical-align: super;
}
<span class="title">MY MISSION</span>
Or It is possible to change HTML use heading tag like this:
.title {
font-family:'Taner Ardali Antikor Mono Medium';
font-size: 30px;
display: block;
position: relative;
}
.title span {
background: #fff;
position: relative;
z-index: 1;
padding-right: 20px;
}
.title:after {
content:"";
display: inline-block;
height: 2px;
width: 100%;
margin-left: 10px;
background: #111;
position: absolute;
left: 0;
top: 15px;
}
<h2 class="title"><span>MY MISSION</span></h2>
I'm trying to override/replace Font Awesome icon with background image. I have only CSS access.
What I have:
.btn.btn-default.bootstrap-touchspin-up:before {
font-family: Fontawesome;
content: "\f067";
font-size: 14px;
}
What I'm trying to achieve:
.btn.btn-default.bootstrap-touchspin-up:before {
background-image : url(Images/arrows-left-right.png);
font-family: initial;
content: "";
font-size: 14px;
height: 20px;
width: 20px;
}
You need these additional properties
width: 15px;
height: 15px;
display: inline-block;
background-position: center;
background-size: contain;
as mentioned by #Alexander De Sousa in comments, inline-block is much better choice to keep everything inline.
Try this
HTML:
<span class="btn btn-default"></span>
CSS:
.btn:before {
font-family: Fontawesome;
content: "\f067";
font-size: 14px;
}
.btn {
border-radius: 50%;
border: 2px solid black;
}
Demo :http://jsfiddle.net/GCu2D/5181/
display:inline-block;
That's all you need. As standard :before and :after are inline, so they'll collapse in regardless of height and width. Inline-block will get you what you want.
I would like to get result something like this:
◄ ███████ ►
Is it possible to make arrows with pseudo-elements :before and :after?
JSFiddle example which demonstrates the problem
<div class="scroll"></div>
.scroll {
width: 100px;
}
.scroll::before {
content: "◀";
}
.scroll::after {
content: "▶";
}
Here it is.
.scroll {
width: 100px;
background-color: grey;
margin: 0 1.2em;
position: relative;
overflow: visible;
min-height: 1.2em;
}
.scroll:before,
.scroll:after {
position: absolute;
color: grey;
min-height: 1.2em;
width: 1.2em;
top: 50%;
transform: translateY(-50%);
line-height: 1.3em;
text-align: center;
}
.scroll:before {
content: "◀";
right:100%;
}
.scroll:after {
content: "▶";
left: 100%;
}
<div class="scroll"></div>
Update. Following discussion in chat, here's how I'd style custom scrollbars on a div. Please note that as of now they are just painted, the div changes size based on content. I know nothing about the logic behind your need to paint scrollbars instead of trusting browsers with it. :)
This is sort of a hack but it works. It involves setting margins.
Here is the updated fiddle
https://jsfiddle.net/j08L8a3b/1/
.scroll {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.scroll::before {
content: "◀";
color: grey;
margin-left: -20px;
background-color: white;
height: 100%;
min-height: 100%;
}
.scroll::after {
content: "▶";
margin-left: 120px;
color: grey;
background-color: white;
}
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
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;
}