The issue is connected with rendering font in different browsers. I was surprised to see the issue is reproduced only in Chrome. It works fine in Firefox, IE8, Safari and even IE6.
Here comes the sample.
And here comes the code itself:
<div style="position:absolute;bottom:2px;padding-top: 1px;width:100%;">
<span style="float:left;">
<div id="saveCustomizationButton" class="smallBlueButton">
<span>Speichern</span>
</div>
</span>
<span style="float:right;padding-right:1px;">
<div id="downloadOrPrintButton" class="smallGreenButton smallGreenButtonSmallLetterSpace">
<span>Downloaden oder drucken</span>
</div>
</span>
</div>
div.smallGreenButton span, div.smallGreenButton a {
display: block;
line-height: 14px;
padding: 1px 7px 2px 13px;
}
div.smallGreenButton {
font-family: arial,sans-serif;
font-size: 12px;
font-weight: 600;
}
div.smallBlueButton {
font-family: arial,sans-serif;
font-size: 12px;
font-weight: 600;
}
That is it. I've read about css reset, and have tried it. Any miracle -nothing's changed. Another way I was considered to use was fixing the width of the container tag. But due to the necessity to maintain multiple localisations I can't use this approach.
I hope smb will propose a solution. Or I'll need to implement some browser-specific behavior.
Waiting for your comments. Thanks in advance.
Text rendering does differ from browser to browser.Sometimes no matter how much we try to change the rendering, we won't get it. You can read this article if you want. It does not provide a solution(I don't think there is one) to this problem but it highlights the differences.
Related
On a webpage I am making, the CSS-containing HTML for a headline is as follows:
<div class="headline">
<span style="color: #00f">◼ </span>This is a headline
</div>
The ◼ is for the Unicode character ◼, the Black Medium Square. This is showing up fine on Firefox, IE, and Opera, but on Chrome it's showing as a hollow square, the "don't know this character" symbol. I'm running all the browsers on Win7Pro.
What is the simplest way to accommodate Chrome and get it to show this symbol? I've tried using ∎, ∎, which is close, but it's a rectangle that isn't a square and therefore won't suffice.
I'm using the Arial font at the moment. If I need to use another font just for this character and just for Chrome that would be fine but how? Or if the closest that's possible is ∎, and I therefore have to put up with Chrome users getting a rectangle that isn't quite a square (which some may feel serves them right for using such a browser), what's the simplest way to target Chrome to achieve that?
It's a pretty simple symbol you need - why not render the square with HTML and CSS?
.square {
display: inline-block;
width: 10px;
height: 10px;
background-color: black;
}
<span class="square"></span>
Per this SO answer, you just have to pick a range of fonts that should have the character. I used his example and it worked on Windows 7:
.force-square {
font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;
display: inline-block;
}
.imitate-square {
width: 7pt;
height: 7pt;
background: #000;
display: inline-block;
}
<div>
◸◹◺◻◼◽◾◿☀
</div>
<div style="font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;">
◸◹◺◻◼◽◾◿☀
</div>
<div>Imitated: <div class="imitate-square"></div></div>
<div> Forced: <div class="force-square">◼</div></div>
You might want to try the Hex version:
'◼'
I can't seem to make it appear properly, so go here: http://www.fileformat.info/info/unicode/char/25FC/index.htm
I have a simple <a class="button"> element, and I noticed on Firefox, the text wasn't as vertically aligned as on Chrome.
Here is some sample code:
Here is my CSS:
body {
font-family: sans-serif;
}
.button {
font-size: 3em;
display: inline-block;
padding: 0.6em 1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #333;
background-color: #7d8cdd;
}
.button > span {
background-color: #8cd5ed;
}
<span>CLICK ME</span>
Now what I'm not sure, is why Firefox is rendering the text so poorly. That is, it is putting a lot of space beneath the text, but not a lot above it.
Here are some screenshots:
Firefox:
Chrome:
Searching around, I wasn't able to find much reading material on the subject.
Anyone have any ideas why Firefox renders text with space at the bottom, but not at the top? Thanks.
NOTE: I am running Mac OS X Yosemite (10.10.5).
Figured it out. When putting font-family: sans-serif;, Chrome will choose Helvetica Neue, whereas Firefox will choose plain Helvetica. That difference of space is in the font files themselves.
Explicitly declaring
body {
font-family: "Helvetica Neue", sans-serif;
}
instead "fixes" the issue on Firefox, aka, makes it so FF and Chrome will use Helvetica Neue as the render font (assuming it is available).
I'm building Magento website and it's working perfectly fine in Firefox and Chrome, but it's not showing correctly in IE9, IE8.
Body font size is set to 12px but IE seems to ignore it completely.
Here's the CSS of body element:
body {
background: url(../images/background/bkgd.gif) repeat-x scroll left top #FFFFFF;
font: 12px/1.55 arial, helvetica, sans-serif;
color: #444;
text-align: center;
}
Here is the website. Can anyone please help?
There are inline styles in your HTML/Template. View source and search for 20px I found on line 99 something like below:
<div a align="right">
<span style="font-weight:bold; font-size:12pt;">Your local No1Pizza is <span style="font-weight:bold; font-size:20px;"><a href="/pizza.html">Wolverhampton.<span/>
<a style="font-weight:bold; font-size:8pt;" href="/index.php/emptybasket/ ">
(Not your desired shop?)
</a>
</div> </div>
You REALLY need to clean up the code. Also pay attention on the wrong closing tag <span/> above.
I have SPAN wrapped into another SPAN:
<span id="outer">
<span id="inner">
Some long text
</span>
</span>
And CSS:
#outer {
font-size: 20px;
font-family: 'Times New Roman';
line-height: 30px;
}
#inner {
font-family: 'Times New Roman';
}
This variant renders exactly the same in Opera, Safari, Chrome, FF.
Text is rendered exactly 30px lines height.
If outer SPAN is set another font-family, for example Arial:
#outer {
font-size: 20px;
font-family: 'Arial';
line-height: 30px;
}
Crome and Safari renders text as 31px line-height.
FF - 30.5px line-height
Opera - 30px (as expected)
Why this happens?
Note: this markup and styles is created by user in WYSIWYG editor.
JSFiddle - right rendering
JSFiddle - wrong rendering
If you look at the image below, you will notice that both fonts have different baseline heights. It appears that Times New Roman is about 2px shorter than Arial.
I'm not an expert on the font rendering engines, but my best guess as to what is happening is that the 1-2px additional pixels applied to the #outer is caused by Arial being 2px taller.
Even though the font within the #inner is Times New Roman, the rendering still has an affect on the outer div due to it being set as Arial.
Hopefully this gives you some insight as to where there are additional pixels in your line-heights.
The line-height value applied is the declared value, as you can see by using developer tools in browsers. The rest is rendering differences that probably have nothing to do with inheritance and are probably not controllable by authors.
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.