I'm having some problem aligning Japanese characters in IE8 on a website I am making.
I have something like <span>Label</span><span>Some value</span>. When both "Label" and "Some value" are either in Japanese or English, they align fine, but when they are mixed ("Label" is always Japanese, but "Some value" might not be) then the alignment is off. Example in the image below:
Surprise, surprise, it all works fine in othe browsers, same image from Chrome for example:
I can't figure out how to fix this. Has anybody come across this before or know a workaround for it? My company is still mostly using IE7, so some trick that would work on that would be most useful.
EDIT 1: I forgot to add the css I am using at the moment. For the label I have:
display: inline-block;
color: Gray;
vertical-align: text-top;
/*For IE7*/
zoom: 1;
*display: inline;
For the values I am using something similar:
display: inline-block;
margin: 0x 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align: text-top;
/*For IE7*/
zoom: 1;
*display: inline;
EDIT 2: I'm sure this is related to this problem. I have input boxes in my form, which are perfectly aligned until I type in some Japanese characters. No problem at all for roman characters again. See below:
Again, no problem whatsoever in other browsers...
EDIT 3:
Had a look at this again today (Over a year after I asked this question...). In IE9, the characters display just like in Chrome and other browsers, basically roman and Japanese words all line up properly. I checked it out using IETester and for the same page, the Japanese fonts are aligned "higher" in IE8 than IE9.
In IE8:
In IE9:
I didn't get to check this out at the time because I didn't have IE9. The fonts look identical, so it must be an IE issue and there is nothing that can be done about it I guess?
Make sure you are also assigning a vertical-align for the text boxes.
http://jsfiddle.net/HkrJH/
As far as the trouble with spans, I can't repro that. What font are you using? Can you post a jsfiddle that demonstrates the issue?
internet explorer is horrible.
target your browser and add a stylesheet.
Example in the head:
<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->
You can place the following HTML tag in the HEAD element of your web page:
<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
I believe this might be a problem with the default fonts used for Japanese vs. English. English characters contain more whitespace than Japanese, because English has to accomodate characters like "c" (square), "t" (taller) and "g" (deeper), while all characters are square boxes in Japanese. So if you use the same pixel size of characters, English ones can still look off from Japanese ones, depending on the font used for either language (likely not the same, or not aligning even if it's the same). If you use vertical-align: middle; you should get a better result.
Related
I am having issues styling a custom and fancy #font-face on a a link.
The font (Alex Brush) goes outside of its boundaries (by boundaries, I mean the clickable section in this case), which is usually not a problem for browsers. However, I have noticed that when I use a different color for the :hover state, the exceeding section keeps the non-hovered link color.
This appears on Chrom{ium|e} (I am using Chromium 31 on Ubuntu 13.10) but not on Firefox. After further testing, I notice that other strange glitches happen depending on how you play with your mouse and tabs, ...
TL;DR: you can try it online.
Or, here is some HTML you can play with:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href='//fonts.googleapis.com/css?family=Alex+Brush'>
</head>
<body>
<a>!</a>
</body>
</html>
And the corresponding CSS:
a {
font-family: 'Alex Brush';
font-size: 400px;
color: red;
text-decoration: none;
}
a:hover {
color: green;
}
Here is the glitch I get when :hovering the link:
Is it possible to tell the bounding box to include the entire font?
Bonus question: On top of fixing the bounding box for styling purposes, is it possible to fix it once and for all? The use case would be to have a proper clickable section that would include all the text, without using display: block or display: inline-block.
Interesting. I looked at a similar issue last month last month. The exact same bug was addressed there, and I've seen it happen there too.
But in the mean time, this issue seems to be fixed. The current version of Chrome (Versie 32.0.1700.76 m) shows the glyph being properly colored on :hover. Both your example as the example in the link above now work fine. I'm pretty sure the issue will be/has been fixed in Chromium as well.
Check out my original answer if you want to know more about what font-specifics made this bug happen.
Works normally in Chrome
I Don't have Chromium, but I often hear about sites that are buggy on Chromium, I don't know any 'normal' person who uses it which is why I don't test in Chromium
anyway, this is a weird possible solution, but it might work?
a:hover {
color: transparent;
text-shadow: 0 0 green;
}
I had a similar problem in a menu and looked at RoeIn's initial answer, which he linked to, but this put the whole menu alignment out. However, the solution below worked for me:
padding-right: 20px;
margin-right: -20px;
Or whatever dimensions best suit your purpose. As long as the padding equals the negative margin it doesn't put other elements out either.
Ignoring discussions of what a 'normal' person might use for a browser, this problem exists in Safari as well.
this is my website
http://www.forid.ir
it is not english but my question is just about the search box (it has an icon and is obvious)
about the curves in search box if your browser is NOT IE9 you can see everything works currectly. (including IE8-)
but if you use IE9 there is a single white pixel at the right corner, i have no idea what causes ie to behave like this :(
between corners i have an input which has the appropriate border i have tried lots of possibilities but it doesn't work the last option is to forget about the curves and have an image for the whole input background.
it's the worst English i've ever used!! so sorry it is hard to explain.
The problem seems to be related to direction: rtl on body. At least, when I toggle that off, the problem disappears.
For a lack of any better ideas, you could fix it with a conditional comment:
<!--[if IE 9]>
<style>
#sr_right {
margin-left: -1px;
}
</style>
<![endif]-->
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
I did this layout here: http://www.2xfun.com/
It uses some css3 effects and stuff which are not supported in every browser, but if they dont work its fine.
The thing is that i really tried to keep the essentials working in old browsers.
I didnt use any negativ margins, which i know of make problems in IE 6 etc
But if i look at it in IE 6 the layout gets messy. The elements are completely garbled.
Where did I fail so terribly? I don't need an analysis of all my errors because i know its by far not perfect. But what positioning css directives are so wrong that they cause IE6 to mess everything up?
So my question is:
What properties or combination of properties do cause such legacy incompatibility
are there any good work arounds (css resets, javascript fixes) ?
addendum:
this is how the page looks like in ie6
and after Šime Vidas's javascript fix
and this is how it should look like and looks like in modern browsers
Everything that has position: absolute, put both top and left positions, not just top. Everything that has float AND margin, set to display: inline. That will at least fix many problems. I'd also recommend a reset styling, like Meyer's. Your code looks a bit underdefined for IE6, it's a picky one.
Put this on the page:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
How does the page look in IE6 now?
Project homepage: http://code.google.com/p/ie7-js/
Getting started: http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
Here we go..
Add a rule to this effect to your normal stylesheet - #neXib was correct:
.headcontainer, .headbar {
left:0
}
Without that, your site has problems even in IE7.
The above snippet, combined with adding this voodoo magic dust I created fixes the pressing IE6 issues:
<!--[if IE 6]>
<style type="text/css">
.headbar-spacer {
width: 169px
}
.content div.right {
padding-right: 0
}
.content h2 {
margin: -30px 0 0 106px;
width: 535px;
padding: 0 0 12px 0
}
</style>
<![endif]-->
I commented out this:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c90156b67654829"></script>
It seemed to somehow make IE6 jump the white video container to the top of the window. So wrap that in a conditional comment if need be.
Your site looks like this with the above changes in IE6 (ignoring the low color depth of this image):
Much better!
Improvements you could make:
Try out DD_belatedPNG to fix your .png transparency issues.
Make an image version of the CSS gradient you have on .headbar. At the moment, IE8 does not have a gradient. IE has support for it's own special kind of gradient, you might consider providing those rules (-ms-filter/filter + gradient?).
Redundant point: fix Notice: Undefined index: jsfix in /home/2xfun/html/application/views/vanilla.php on line 13. Obviously you just put that in for testing. I recommend suppressing the PHP error by prefixing the line with #.
Kick IE6 in the face. Twice.
The HTML symbol for angle, ∠ (∠) does not work in IE 6 or 7. What are the other alternatives to display the symbol in Internet Explorer ?
You could use a solution that incorporates both Jamie's and Shoban's answers and adds some conditional comments:
<style type="text/css">
span.ang { display: inline; }
span.ang_ie { display: none; }
</style>
<!--[if IE]>
<style type="text/css">
span.ang { display: none; }
span.ang_ie { display: inline; font-family: Symbol; }
</style>
<![endif]-->
<span class="ang">∠</span><span class="ang_ie">Ð</span>
The above works on Windows in IE6, 7 & 8, Firefox 2 & 3, Opera 9.6 and Google Chrome 1.
It does not work in Safari for Windows 3 or 4. Safari for Windows renders a square for ∠ (and ∠). If Safari for Windows support is required, you are going to have to combine JavaScript to detect IE and Safari with Jamie's replace with image solution.
Try using this
∠
<FONT FACE="Symbol">Ð</FONT>
I have checked and it works in ie7 :). http://comers.citadel.edu/math_sym2005.htm
Try surrounding the angle with a
<span class="ang">∠</span>
then, if the browser is IE, show an image of the angle there using CSS.
See this article on attaching images with css:
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
Looking at the problem from the other end, i.e. as a user who sees hollow squares for 〈 (but also 〈 and 〉), I found a solution for IE7 (on Windows XP):
In the Internet Properties (Sorry, I have only a German version here, so I don't know if this is the correct name.), go to Fonts, and set the text font to Arial Unicode MS or Lucida Sans Unicode.
Strange enough, even if a page doesn't use that font, just the setting causes IE7 to correctly interpret those HTML named entities.
Edit: Lucida Sans Unicode doesn't work for all entities. E.g., ∠ or ↩ display ok but 〈 and 〉 not.