firefox font rendering problem/issue - firefox

maybe anyone have an idea why this is happening and how to fix it ?
p
{
display: block;
margin: 1em 0px;
}
p.description
{
color: #969797;
font-family: Calibri, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: lighter;
letter-spacing: -0.05em;
line-height: 1em;
text-decoration: none;
text-shadow: none;
text-transform: none;
word-spacing: 0em;
}

You mean why FF displays things bold?
I'd have to see your code i suppose...
Special characters, though, are usually a bit tricky. If your character encoding type is not set right, or the visitor has the right font not installed, the browser may just pick another font that looks like it.
The difference between the browsers is caused by Webkit (at least so I think).

Safari and Chrome use Webkit, maybe that's it...

Related

Prevent outlook mobile from automatically creating links which arent real

So I am creating a new email template but somehow outlook mobile thought it was a good idea to turn all the text which looks like an href (but really isnt) into a link. This takes place in any HTML tag, "h1", "p", "span", "div" etc.
Is there any way to prevent this stupid feature from rendering on other peoples their phones?
Here is the code (all styles are inlined so there is no stylesheet):
<h1 style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; Margin-bottom: 8px; Margin-left: 0; Margin-right: 0; Margin-top: 16px; color: #ffffff; padding: 0; font-size: 26px; line-height: 34px;">Order ID 204793</h1>
<p style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 20px; Margin-bottom: 24px; Margin-top: 0; line-height: 27px; mso-line-height-rule: exactly; margin-bottom: 16px;">08/09/2018, 15:47</p>
Wrap any text you don't want linked in a <a> tag of your own and style it so that it doesn't appear to be a link (e.g "color:#000000;text-decoration:none;"). You don't need to include an href attribute.

How can I change the direction of jHtmlArea

I'm using jHtmlArea in my project. I want to write in "Right To Left" direction mode. But it only supports Left to Right.
How can I do in this way?
I found the answer by myself.
I attached a css file to my jHtmlArea. then set the direction in it.
$('textarea').htmlarea({
css: "/MyRootFolder/Styles/jHtmlArea/jHtmlArea.Editor.css"
});
jHtmlArea.Editor.css :
body
{
background: #FFF;
color: #000;
margin: 2px;
direction: rtl;
font-family: tahoma;
font-size: 13px;
}

Confluence keyboard shortcut markup

On Stack Overflow, I can use markup for keyboard shortcuts like <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F2</kbd> for Ctrl+Alt+F2.
Is something like this also possible in Confluence? If yes, how?
I haven't tried it yet, but it seems the free official plugin Markdown Macro for Confluence will help you to use any Markdown syntax.
Two solutions found on Atlassian's forums:
The first is to
Paste table row <kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> in the Confluence's shortcuts
The second is to add your own CSS to the page, which is not ideal:
This is done with a combination of CSS and HTML.
Start with a CSS macro (or edit the Look and Feel):
kbd > kbd {
box-shadow: 0 1px 0 rgba(0,0,0,.2);
border-radius: 3px;
padding: .1em .7em;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
background-color: ;
display: inline-block;
margin: 0 .1em;
white-space: nowrap;
font-size: 1em;
}
Then wrap the key letters and words in HTML:
<kbd><kbd>K</kbd></kbd>

Chrome Webkit Elements only show up in Developer Mode

Everything is great on all browsers on OS X, I come to test on windows, and it seems my webkit elements, ie gradient backgrounds and radius borders do not show up - in chrome, firefox or ie. (so it isn't a problem with chrome exclusively but perhaps Windows 7?) I should not i'm on chrome 27 and ie 10. On another windows pc with an earlier chrome and ie 8 it looks as it should.
So, I go into chrome developer mode to take a look, and when I rollover the 'element', I can actually see the webkit items as they should be under the highlighted colour. Does that make sense?
Anyone experienced this before and know what it means?
For example, the following will be invisible in all windows browsers, but when I hover over it in chrome it shows up:
.example .example1 li {
float: left;
padding: 0px 5px;
width: 120px;
height: 60px;
border: 1px solid #e6e6e6;
margin-left: 14px;
margin-bottom: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
text-align: center;
font-size: 16px;
font-weight: 500; }
Maby you need to run your code through a Prefixer, http://prefixr.com/

IE css how to?

Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius

Resources