I'm using anchor tags with 'content' set on :before to be : "——";
a.line {
font-size: 21px;
font-family: Khula,sans-serif;
display: inline-block;}
a.line:before {
content: "——";
padding-right: 25px;
font-weight: 400;
font-family: serif;
font-size: 24px;
letter-spacing: -10px;
transition: all .3s;}
Sometimes they render like this:
When they should render like this:
It doesn't happen every time the page loads, and appears to just happen at random. Has anyone encountered this before and found a solution?
Thanks in advance.
Use the Unicode value instead. An em dash is U+2014
content:"\002014";
Related
On this website, I'm unable to remove the bold property from the bold text (text starts with "Conforme o art. 43...").
What is most intriguing is that the font-weight command below applies normally to all parts of the referred site, except for the bold part.
I'm using the following code in Stylebot (Chrome Extension):
div {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
How can I get this done? Thanks in advance!
Please let me know if this is what you are looking for.
div > * {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
or
* {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
Edit: Maybe this is more what you are looking for->
.q-question-enunciation > span{
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
The text you are referring to ("Conforme o art. 43...") is inside a span tag that has an inline style style="font-weight: bold,".
An inline style like this will override every CSS rule that you define in an external style sheet or in a <style> tag inside the header of your page, so you need to
...either erase this style tag in the HTML code (if it's actually there), or
...if it's not there, it's inserted via javascript. So you need to find out which javascript inserts this code into the HTML code and erase or deactivate that code.
EDIT / Additional note: The code of the answer which you just accepted will apply that CSS rule either to all direct children elements of any div or (second option) even apply it to all elements in your page. I strongly doubt that you want either of this, since most likely your pages will consist of more than what you showed us...
How to change the Unicode for an ::after object in wordpress?
I tried to do it in css and it just imputed the unicode code instead of the icon?
The original code is this:
.x-navbar .desktop .x-nav li>a>span:after {
content: "\f103";
margin-left: 0.35em;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And the code I updated it to is this. I have tried using an !important; tag on the end of the unicode line and no luck, so I took that out...
x-navbar .desktop .x-nav li>a>span:after {
content: "f0d7";
margin-left: 0.35em;
font-size: 16px;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: rgba(82, 76, 76, 0.43);
-moz-osx-font-smoothing: grayscale;
}
This is my div site below.
http://wvleadership.cyndeeadkins.com/
So what am I doing wrong and why is this so hard to over ride?
So I finally found out why it was dropping the "\" from the code. I finally got a response from the wordpress theme developer. This will be nice to know for anyone else dealing with an issue like above.
There were two issues all together.
#1 issue: I was saving this css code in the custom css section within the
"customizer" and it apparently doesn't like that. You need to save it in the child-theme's style.css file instead.
2 issue: I needed to add a little more code to the string, adding "body" in the beginning.
body .x-navbar .desktop .x-nav li>a>span:after {
content: "\f0ab";
}
I updated the child theme css file, then refreshed the caching and it worked. :D
I've added a contact bar at the top but for some reason the numbers aren't on the same line.
http://puu.sh/kY9xG/6aed0786fc.png
css
.top_bar .tob_bar_right_col p {
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
It is correct only.It's coming due to the default font you used. Change the font type like below
.top_bar .tob_bar_right_col p {
font-family: "Times New Roman";
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
That's because of the font that you are using.
Some fonts uses the old way of placing the digits (text figures), with ascenders and descenders. The new way of placing the digits (lining figures) treats them similar to capital letters.
To get the new way of placing the digits you need a font that uses that form, for example Arial.
That's because of the font-family you are using. Some of them will make the numbers look weird. Just change you're font-family for that text and it should work.
Example:
.top_bar .tob_bar_right_col p {
font-family: "Arial", sans-serif;
}
Looks like it's a custom font, which appears different than other fonts.
You can check it e.g. by typing the same text in Gimp or Photoshop with the same font. It should output the same result.
Make sure, you're using the desired font-family.
this is css:
h3 {
font-size: 18px;
font-weight: normal;
line-height: normal;
margin-bottom: 9px;
word-wrap: break-word;
}
& then applying cufon as:
Cufon.replace('h3');
but text is still rendering in single line.
if I'm doing anything wrong here?
Cufon posseses a separate property which you can set to 'words', 'none' or 'characters'.
Also, a common denominator of many problems I have encountered while working with Cufon is not specifying a STRICT DOCTYPE document header.
You can read more at: https://github.com/sorccu/cufon/wiki/API
How to get cross browser <sup> without interrupting line height?
I tried vertical-align:top but it looks ok in FF 3.6 and IE but not in FF 3.0.
How to get consistent in size (size of superlative text) and position of <sup> identical in all browsers without interrupting line height.
I'm using <sup> to indicate footnote? not to show power
<p> Stackoverflow is killing<sup>10</sup> experts-exchange</p>
Your best chance for a consistent rendering are real superscripts:
HTML
<p>Stackoverflow is killing<span class="unicode">¹⁰</span> experts-exchange</p>
CSS
.unicode
{
font-family: 'Lucida Sans Unicode', 'DejaVu Sans', 'Arial Unicode MS';
}
Live
Stackoverflow is killing¹⁰ experts-exchange
sup {
vertical-align: super;
height: 0;
line-height: 1;
}
If that doesn't work, you can take it a bit further..
sup{
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
bottom: 1ex;
}
vertical-align: text-top;