I was able to use this hack: How can I replace text with CSS? --to replace a closing 'X' button on a lightbox from a third party library I'm using. It works great in all browsers but IE11. It seems IE hides both the element and the pseudo-element even though visibility: visible is set on the pseudo. If I toggle visibility using dev tools, they both show up.
Note: if the actual 'X' button were an actual 'X' character, I could easily style it as needed. Unfortunately, they use a symbol, so I have to resort to using this method to "replace" it with an actual X, to match the design standards of the site.
CSS for the button:
/* Hack to replace the close button text */
#_pendo-close-guide_ {
visibility: hidden;
}
#_pendo-close-guide_:after {
content:'X';
visibility: visible;
display: block;
position: absolute;
right: 6px;
top: 8px;
font-size: 17px;
font-weight: 200 !important;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
color: #444;
}
Any help would be much appreciated.
To get this working in IE, I had to use the old "text-indent: -9999px" trick:
/* Hack to replace the close button text */
#_pendo-close-guide_ {
text-indent: -9999px;
line-height: 0;
}
/* Hack to replace the close button text */
#_pendo-close-guide_:after {
content:'X';
position: relative;
right: 6px;
top: 4px;
line-height: initial;
text-indent: 0;
display: block;
font-size: 17px;
font-weight: 200 !important;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
color: #444;
}
My solution was inspired by #Tim's answer. However, I wasn't able to use text-indent due to my specific case so I used
.container {
position: relative;
left: -9999px;
}
.container:after {
position: relative;
left: 9999px;
}
and it worked in IE11 and other browsers.
Related
I have the following snippet of HTML..
<ul>
<li class="fa fa-balance-scale" id="test" />
</ul>
..with the associated CSS classes:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-balance-scale:before {
/* font-awesome: balance-scale */
content: "\f24e"
}
.fa-hourglass-2:before,
.fa-hourglass-half::before {
/* font awesome: balance-scale, fa-hourglass-half */
content: "\f24e \f252";
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
vertical-align: -15%;
}
..and some JS to increase the size and append an hourglass after an event:
$("#test").addClass("fa-hourglass-half fa-lg")
..and I am looking to create the following (image):
Whilst I have managed it using the following...
<i class="fa" icon-before="" icon-after=""></i>
i:before {
/*balance-scale*/
content: attr(icon-before);
position: relative;
font-size: 1.5em;
margin: 0.1em;
}
i:after {
/*fa-hourglass-half*/
content: attr(icon-after);
position: absolute;
font-size: -0.5em;
/*margin-bottom: 2.0em;*/
}
...it is not appropriate as I need to use CSS classes only. This is due to dependencies (and ensure compatibility) with other components of the application I am working on.
Is there anyone who can propose a possible solution using only CSS classes? Any advice or suggestions would also be greatly appreciated. Thank you.
With thanks to all and especially sheriffderek, this is the code which was used:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa.loading {
position: relative;
}
.fa.loading:after {
display: block;
position: absolute;
top: -8px;
right: -12px;
content: '\f252';
transform: scale(0.7, 0.7);
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
vertical-align: -15%;
}
If you are asking for an official 'font-awesome' way, I don't know it - but here's the logic behind how I'd try and do it.
First I would create a jsFiddle - and make sure that the font and other dependencies are loaded / so we're all on the same page: http://jsfiddle.net/sheriffderek/rqLkjmo3/2/ --- it looks like this link: http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css includes the #font inclusion and the css.
Then I would create some functionality to check:
<ul class='icon-list'>
<li class='icon fa fa-camera-retro' id='test'></li>
</ul>
<button rel='toggle'>toggle superscript</button>
jQuery in this case:
var $button = $('[rel="toggle"]');
$button.on('click', function() {
$('#test').toggleClass('waiting');
});
And then lay over something - in the top corner / is this font-awesome specific? / is there an hourglass-version of 'balance-scale' ? I don't know. I couldn't get .fa-balance-scale to work...
.icon-list {
padding: 1rem;
}
.fa.waiting {
position: relative;
}
.fa.waiting:after {
display: block;
position: absolute;
top: 0;
right: 0;
content: 'x'; /* whatevers */
color: red;
transform: translate(50%, -50%);
}
This logic should work for any type of graphic inclusion. Icons fonts were great when they were the best option, but that is no longer the case. Take a look at fontastic or something that will spit out a sprite sheet. : )
I have a weird FIREFOX issue. If you go to http://www.aerlawgroup.com - scroll down and see the box on the right hand side (with the gavel). As you can see, the text and phone number are flushed too far to the right. If you see site in Chrome or Safari, it renders fine. I was advised to reset the .hr css tag, but that didn't work. I use Weebly, so while I can change the HTML and CSS, Weebly will insert it's own code upon publishing. Here is the code:
<div id="FREE2">FREE CASE</div>
<div class="PHONENUMBER" id="PHONE3">(800) 852 - 9851</div>
<div class="EVALUATION" id="EVAL2">EVALUATION</div>
<div class="CALLORCLICK" id="CALL2">CALL OR CLICK</div>
</div>
and
#FREE2 {
font-family: Arial, Helvetica, sans-serif;
color: #b2c8ff;
position: absolute;
top: 23px;
font-size: 22px;
left: 693px;
}
#EVAL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 42px;
font-size: 20px;
left: 693px;
}
#CALL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 65px;
left: 693px;
font-size: 17px;
}
#PHONE3 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
top: 170px;
position: absolute;
left: 824px;
margin: 0px;
padding: 0px;
font-size: 16px;
}
It isn't a good idea to use absolute positioning on the elements inside that box relative to the page. I think Chrome/Safari and Mozilla have different ideas as to what those pieces of text should be relative to. Having them relative to the box itself will remedy your problems (from what I've been messing around with in developer tools, it's fixing it).
To make left: xx and top: xx reposition the element relative to the box, simply set the positioning of its container (.bigimg) to relative.
.bigimg {
background-image: url("http://www.aerlawgroup.com/uploads/2/1/1/5/21159280/9150872_orig.jpg");
width: 282px;
height: 199px;
position: relative;
}
Now if you change your values for #FREE2 for example to make them visible
#FREE2 {
font-family: Arial,Helvetica,sans-serif;
color: rgb(178, 200, 255);
top: 30px;
font-size: 22px;
left: 20px;
position: absolute;
}
You will need to adjust the values for all elements inside the box, and then it will be consistent between browsers. These values are just an example, you'll need to find the difference between the old and the new values yourself.
If you're using position absolute, you have to set position relative to its parent element. For example, the parent element for ".PHONENUMBER" would be ".bgimg".
.bgimg {position:relative;}
.PHONENUMBER {position:absolute; top:170px; right:20px;}
So ".PHONENUMBER" will position absolute, relative to ".bgimg".
I'm trying to change the style blog navigation style on my blog from "Newer / Older" text to NEXT / PREVIOUS and also make it match the same color/font/style/hover of my RSS text at the top :Subscribe via RSS: So far I can't get anything to change.
.pagination .next-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
.pagination .prev-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
This is a pretty janky way to do it, but if you ONLY have control over the CSS, this should work for you:
.pagination
{
color: rgba(0,0,0,0)
}
.pagination a
{
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 700;
}
.pagination a:first-child
{
position: relative;
left: 616px;
color: rgba(0,0,0,0);
}
.pagination a:first-child:after
{
position: absolute;
left: 0;
content: "Next";
color: #0076a9;
}
.pagination a + a,
.pagination a:only-child
{
position: relative;
left: auto;
margin-left: -59px;
color: rgba(0,0,0,0);
}
.pagination a + a:after,
.pagination a:only-child:after
{
position: absolute;
left: 0;
content: "Previous";
color: #0076a9;
}
Again, this is NOT the recommended solution, if you have control over HTML. What this does:
Hides the "/" from the Older/Newer
Sets the link font styles.
If there is a link in the .pagination div that is the first element (first-child), we assume it is the "Newer" link. We reposition that to the very right side of the page, but make the link invisible using rgba(0,0,0,0)
We utilize the CSS :after pseudo-class to add text after that link, which says "Next", and color it to be the same color as the link. We position that on top of the invisible link using position: absolute and left: 0
If there is a second link, or if there is only one link in .pagination, then we assume that is the "Older" link, and move it to the far left.
We then treat it the same way as the "Newer" link, but we add "Previous" to it.
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/
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}