Some Chinese characters on my website renders in Bold. I have no styles attached or elements within the <p> element. This happends only on FireFox
I tried setting content-language to
<meta content="ch" http-equiv="content-language">
and also tried adding the font SimSun as mentioned here
Can you guys please check this and let me know your thoughts here
Related
I've got a strange probleme here.
If I have this line in the HEAD part
<meta name="viewport" content="width=1200,initial-scale=2,minimum-scale=2">
touching the lines which are not links in the following example causes one of the links to get activated:
<ul>
<li>example</li>
<li>test</li>
<li>Text in between</li>
<li>Even more text in between</li>
<li>something</li>
<li>other</li>
</ul>
This seems to happen only with that line in the HEAD part. Everything is okay with Chrome and Android Browser.
Is there any way to solve this?
Edit:
It gets even worse if I make the line-height small, for example this way:
li { font-family:Arial; font-weight:bold; font-size:12px; line-height:12px;}
Now whether I use that META element or not, it is almost impossible to tap the texts in between without activating one of the links. Again only in Firefox mobile browser.
I think I've found a solution, however, I don't like it very much.
Adding an "onclick" attribute (whether empty or not) to each unlinked element makes it touchable in Firefox browser.
This can be achieved through a small JavaScript loop.
Better solutions are appreciated!
I tried to make something like in this example: http://jsfiddle.net/WM583/20/ on Windows RT with IE10.
The problem is, that the touched element always gets selected on touch, which looks bad. I tried:
-ms-touch-select:none;
-ms-user-select:none;
user-select:none;
But it still gets selected. Does anybody know how to prevent the selection?
Try the following
Special meta tag
<meta name="msapplication-tap-highlight" content="no" />
and also the following style
a:active{background-color:transparent !important;}
If you have an element following another element that has float:left and turn on contenteditable in IE8, the following element will be precedet by an empty line in IE8 if you turn contentEditable="true".
An example:
<img src="foo.jpg" style="float:left">
<p>Some random text</p>
in IE8 this will be rendered like this:
See the line before "Some random text"?
This is especially annoying if you use a wysiwyg-editor because this affects some of its functionality. Also, this creates markup you don#t want. In CKEditor, you can see that the dom-path of that line is in the body, not inside any element.
I reported that problem to Microsoft some time ago and they didn't want to fix it: https://connect.microsoft.com/IE/feedback/details/576042/floated-elements-in-contenteditable-can-generate-an-empty-line
The last time that I checked with IE10 pp2 still had the problem.
Manually setting the css of paragraph elements with:
p {margin-top:0;margin-bottom:0}
should resolve this issue.
In some html documents I'm using webfonts for only a couple of words. Performance-wise loading a complete font-file seems wasteful. This is where the unicode-range parameter of the #font-face declaration comes in:
http://www.w3.org/TR/css3-fonts/#unicode-range-desc
With it I supposedly can define what characters of the font-file to load, thus improving performance greatly.
But I just can't get it to work. And the odd thing is that it diplays all the characters in firefox, and it fails to load the font in safari just if I include the unicode-range parameter in my declaration.
Any help would be appreciated, below is the html I was testing it with:
<!doctype html>
<html lang="en">
<head>
<style text="text/css">
#font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}
*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>
You are misunderstanding the purpose of that value. From that page:
This descriptor defines the range of Unicode characters supported by a given font
So this isn't the glyphs (or characters) to download, this is actually telling the browser what characters are in the font so that the browser can determine if its even worth downloading the font in the first place. If the text being styled isn't in the given unicode-range then the font won't be downloaded.
Example XIII on the page you reference shows a great example. Imagine 3 #font-face rules that share the same font-family attribute. The first rule, however, points to a giant 4.5MB TTF file that has every possible glyph needed. The second rule lists a much smaller 1.2MB TTF but says to only use it only if all of the characters fit into the Japanese glyph range. The third rule lists a very small 190KB file that can be download if the text being styling is only roman.
I recently have found a strange occurrence in IE8 & FF.
The designers where using js to dynamically create some span tags for layout (they were placing rounded corner graphics on some tabs). Now the xhtml, in js, looked like this: <span class=”leftcorner” /><span class=”rightcorner” /> and worked perfectly!
As we all know dynamically rendering elements in js can be quite processor intensive so I moved the elements from js into the page source, exactly as above.
... and it didn’t work... not only didn’t it work, it crashes IE8.The fix was simple, put the close span in ie: <span class=”leftcorner”></span>
I am a bit confused by this.
Firstly as far as I am aware <span class=”leftcorner” /> is perfectly valid XHTML!
Secondly it works dynamically, but not in XHTML?!?!?
Can anyone shed any light on this or is it simply another odd occurrence of browsers?
The major browsers only support a small subset of self-closing tags. (See this answer for a complete list.)
Depending on how you were creating the elements in JS, the JavaScript engine probably created a valid element to place in the DOM.
I had similar problem with a tags in IE.
The problem was my links looked like that (it was an icon set with the css, so I didn't need the text in it:
<a href="link" class="icon edit" />
Unfortunately in IE these links were not displayed at all. They have to be in
format (leaving empty text didn't work as well so I put there). So what I did is I add an few extra JS lines to fix it as I didn't want to change all my HTML just for this browser (ps. I'm using jQuery for my JS).
if ($.browser.msie) {
$('a.icon').html(' ');
}
IE in particular does not support XHTML. That is, it will never apply proper XML parsing rules to a document - it will treat it as HTML even with proper DOCTYPE and all. XHTML is not always valid SGML, however. In some cases (such as <br/>) IE can figure it out because it's prepared to parse tagsoup, and not just valid SGML. However, in other cases, the same "tagsoup" behavior means that it won't treat /> as self-closing tag terminator.
In general, my advice is to just use HTML 4.01 Strict. That way you know exactly what to expect. And there's little point in feeding XHTML to browsers when they're treating it as HTML anyway...
See I think that one of the answers to Is writing self closing tags for elements not traditionally empty bad practice? will answer your question.
XHTML is only XHTML if it is served as application/xhtml+xml — otherwise, at least as far as browsers are concerned, it is HTML and treated as tag soup.
As a result, <span /> means "A span start tag" and not "A complete span element". (Technically it should mean "A span start tag and a greater than sign", but that is another story).
The XHTML spec tells you what you need to do to get your XHTML to parse as HTML.
One of the rules is "For non-empty elements, end tags are required". The list of elements includes a quick reference to which are empty and which are not.