Fonts in the latest Chrome, Opera, Safari and Firefox look fine but in IE9 they look blurry and small in comparison. On other sites they look alright though?
Is there anything I can change in CSS to make them all look the same? Mainly the size as it makes the whole website look odd...
I'm using the following CSS:
margin: 0px;
padding: 0px;
font: 11px Verdana, Arial;
line-height: 13px;
Declaring
<!DOCTYPE html>
will make IE9 behave just that bit better.
I would look in HTML5 Boiler Template. They've already solved all these little quirks and created a nice boilerplate for people to use.
Related
I started creating an app using Bootstrap, and ended up customizing the CSS so much as to not need Bootstrap at all. However, when removing the bootstrap CSS file, I ran into a problem.
I have an element which I am assigning 120% font-size:
#page-title {
font-size:120%;
}
Now with Bootstrap 3.3.5, the font is one size, apparently calculated to 14px according to chrome dev tools.
However, if I remove the Bootstrap CSS and just set body to have a font-size of 14px (and the various other Bootstrap styles such as line-height), the font is a different size, but only on Windows Phone 8.1 IE11.
my body css is the following:
body{
margin:0px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
Which is, as far as I can tell, the same as Bootstrap's. I am also still including all the same meta tags. The only difference is the CSS file.
My question is not why does this specific version of IE do this (as I cannot recreate it on Windows 8.1 IE11), but what magic does Bootstrap's CSS have that I can copy?
I went digging through the entirety of the Bootstrap CSS and found the bit that was missing.
#-ms-viewport {
width: device-width;
}
This fixes the font sizing (and a few other tweaks) On Windows Phones and Tablets that appear correctly with Bootstrap, but not without.
It's on a simple asp.net web project. There's a Styles folder in the project and in that folder are four css files all pretty simple. Main.css has this:
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 85%;
width: 700px;
height: 900px;
margin: 0px auto 0px auto;
padding: 10px;
border: 2px;
background-color: green;
}
The green (it was originally white) shows up in IE but not in Chrome. I reference the css files in the ASPX file:
<link href="Styles/CheckOut.css" rel="Stylesheet" type="text/css"/>
<link href="Styles/Main.css" rel="Stylesheet" type="text/css" />
The green was only one test. I made other changes to the css files and none showed up in Chrome. Aside from the css issue, the app performs fine in Chrome as well as IE.
The Page Inspector reflects the css files; but Chrome does not. There are a couple of similar seeming questions here but none address my issue, AFAIK.
When you refresh the page in Chrome, do you have dev tools open? And if you do, do you have "Disable cache (while DevTools is open)" checked? I've found that Chrome is pretty aggressive about caching stuff, so if you're not seeing your changes this might be something to look into. (You can verify if that checkbox is marked by hitting F12 on Windows or option-command-I on Mac, and clicking on the widget wheel. It's the first checkbox under "General".)
I have the following HTML:
<div class='box'>text</div>
and CSS:
.box {
/* non-essential */
display: inline-block;
margin: 2em;
background: plum;
/* ESSENTIAL */
transform: rotate(45deg);
font-family: Courier;
}
And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.
Expected result:
It is also the result I get in Chrome, Firefox, IE9, Safari.
However, in Opera it looks like this:
If I take out the transform (that is, the div is not rotated
anymore), then the text is shown.
If I replace the font with another one, then the text is shown.
So why is this happening and what other solutions do I have?
In case this helps:
Why is this happening
It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.
You get the same results with Modern and Roman and any other font where you have a .fon version.
You can look in C:\Windows\Fonts for a complete list.
What other solutions do I have
If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.
If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.
If you change the font-family tag to the below it works:
font-family:"Courier New", Courier, monospace;
http://jsfiddle.net/3tTyp/1/
RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.
applying georgia to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle http://jsfiddle.net/mvivekc/GJaDy
the code is--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
font-family: Georgia;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
zoom: 1;
}
.georgiaWithoutTransform{
font-family: Georgia;
margin-top: 30px;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
}
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>
Cant understand why this is happening and badly need a workaround for this problem.
Here's a screen shot of the problem on IE8 --
Same happens on the fiddle as well.. problem is seen only on IE,not sure why..
Please help,
Thanks in advance
I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.
P.S : using an image as a workaround did work like a charm for me.
IE Filter Antialiasing problem
Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.
how can I force the attribute "small" to a specifically size? (ex: 13px)
I'm reading data from a db and I have to display tags like this:
<p class="MsoNormal" style="margin: 0cm 0cm 0pt; text-align: justify;"><span style="font-size: small;">Text</span></p>
I can't modify these tags and works different in IE8 and FireFox so I want to force it.
Is it possible?
Thank you.
Add a Standards mode <!DOCTYPE> to your document.
The font-size keywords are only implemented differently by IE in Quirks mode. Go to Standards mode and IE will behave the same as Firefox (and it fixes many other bugs too).
Will this work?
font-size: 13px;