This is my HTML:
<hr class="star-light">
This is my CSS:
hr.star-light:after {
color: #fff;
background-color: #EF672F;
}
hr.star-light:after, hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
It shows a hr with a white star in the middle in Firefox, but in Chrome its just a hr, no star is shown.
Any idea what I have to change in order to make it work in Chrome?
Thanks
hope this may help you.
Please try below CSS.
hr.star-light:after, hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: 0em; /* changed value from -.8em to 0em */
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
Is there any reason to assigned negative value to top property?
Please see codepen example - https://codepen.io/prakashrajotiya/pen/ZEzxKdJ?editors=1100
Related
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
I have built web site (www.dubovik.org it's on russian, but it's not relevant to the issue) everything looks quite ok except on mobile Safari (on iphone and ipad). Only one h2 (with phone numbers) has blue color instead of white (as other h2's).
This is html with problematic heading:
<h2 class="heading" id="left">694-29-29 <br> 7-911-922-35-97</h2>
And css:
h2 {
clear: both;
color:#444444;
text-align: center;
font-size: 1.2em;
font-family: Helvetica, italic;
}
.heading {
width: 650px;
color: #fff;
text-align: right;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
line-height: 1em;
}
#left {
position: absolute;
top: 335px;
left: 1.5%;
z-index: 5;
float: left;
width: 500px;
color: #fff;
text-align: left;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
font-size: 3.5em;
line-height: 1em;
}
Tried everything (style it differently, give it different classes and id's and style them differently) - mobile Safari renders h2 heading with phone number in blue color.
Thanks for your help!
iOS automatically makes telephone numbers into links. You can stop it from doing that like this:
<meta name="format-detection" content="telephone=no">
Or you can keep the number as a link and style it like this:
a[href^=tel]{
color:inherit;
}
You could try this:
color: #fff !important;
I'm trying to get rid of the default select to use something more aligned to the style of my site.
I created a <button> to wrap the select. Gave it opacity: 0 and absolute positioning and sizing to make it fit the button. With some jquery i made it so that the active option appears also as the text of the button, in a <span>. It looks pretty nice.
The problem is that on chrome and safari works perfectly, on firefox instead quite not!
webkit listen to the click on the select even if it's not visible, moz don't (pretty curious about IE and opera). I really don't know how to solve this...
Here a fiddle with a reproduction of the problem:
http://jsfiddle.net/bakaburg1/YyvRf/2/
Any help is welcome.
You can use <div> instead of <button>
HTML:
<div class="btn btn-small select-container">
<select>
<option>title</option>
<option>date</option>
<option>author</option>
</select>
</div>
CSS:
.btn.btn-small{
padding-bottom: 2px;
padding-top: 2px;
color: #737373;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 14px !important;
font-variant: small-caps;
font-weight: bold;
}
.btn.select-container {
position: relative;
padding-right: 24px;
}
.btn.select-container select {
position: absolute;
top: -1px;
left: 0;
height: 117%;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1000;
}
select.btn {
width: initial;
height: 23px;
padding-right: 20px;
-webkit-appearance: none;
}
select.btn:focus {
outline: none;
}
.select-container {
position: relative;
}
See it here: http://jsfiddle.net/YyvRf/3/