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;
Related
When using white text on black background the text looks fatter than it should look. Its pure text with css. I'm using typekit.org font.
Is there any way to fix this or is it some kind of anti-aliasing problem?
The text is bold because of the anti-aliasing algorithm being used in your browser. It's easy to verify. Take screengrabs in IE, Safari, Firefox and Chrome. They all anti-alias differently. Some make the text look thicker than others. Generally the better text looks white-on-black, the fatter it looks reversed.
There's a full explanation here: http://www.lighterra.com/articles/macosxtextaabug/
This will turn off anti-aliasing in most browsers:
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
Actually, it is a known bug:
I was able to fix this by using:
-webkit-font-smoothing:antialiased
Source: this article (cached on archive.org).
Kinda late, but it may still be useful to some.
Just remember this is not recommended. Unless you're on MacOS and are using light text on dark background.
This is not an optical illusion. It is an OS and browser related issue which still exists in 2018. This little snippet demonstrates the problem:
<div style="background-color: #000; font-size: 16px; position: relative;">
<div style="color: #fff;">Hello World</div>
<div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>
If you are sitting in front of a macOS box you might notice the white outlines. They are the result of over motivated font smoothing. Try using
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; to reduce this effect.
I've found that a combination of font-smoothing: antialiased or font-smoothing: grayscale (like the others have mentioned) and text-rendering: optimizeLegibility can produce consistent results on light and dark colors and also across different browsers. You need to do proper testing in each browser because you don't get the same results with every font. Sometimes only setting font-smoothing does the trick, sometimes only setting text-rendering does the trick, and sometimes you need to use both.
I'm trying to get rounded corners to on of my css class with the code as it follows
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
I have been reading couple of articles related to my issue and the code above should be ok but in my case won't fire.
Add this to your markup as the very first line.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Use this for border radius for better compatibility with other browsers also.
-moz-border-right-radius: 5px;
-webkit-border-right-radius: 5px;
border-right-radius: 5px;
-moz-border-left-radius: 5px;
-webkit-border-left-radius: 5px;
border-left-radius: 5px;
IE9 uses CSS3 (the industry standard). Your code should therefore work.
A very common problem is that although you are using ie9, it might be rendering the page using an older version. See if compatibility mode is enabled by mistake. You could also try the developer tools (F12) and look at the document mode and browser mode (at the top) are set to IE9.
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.
For some odd reason any background styles I set on my (being loaded within a modal if that makes any difference) are not rendering in IE7 or IE8. It all looks completely fine in all other (real) browsers (including IE9). My code is as follows:
<hgroup>
<h6>Request Information Form</h6>
<img src="/images/x-close.png" alt="Close" class="close" />
</hgroup>
I know you aren't supposed to put anything besides <h1>-<h6> within an <hgroup>, but I need this little close img in there, and even when I've tried pulling it out, I ran into the same problem (plus it all "seems" to validate).
The CSS is:
hgroup {
position: relative;
width: 668px;
height: 32px;
margin: 0 0 16px;
padding: 14px 14px 0 14px;
background: #B66115 url(/images/modal_header_bckgrnd.png) repeat-x 0 0;
font: normal 20px/20px 'crimson Text',Georgia,serif;
color: #F6F5EE;
}
Also, I have declared <hgroup> as display:block, and I am using the IE shim. All I keep getting is a white background (which really doesn't work when I have white text in the block!).
Thanks in advance for any and all help.
IE7 and IE8 do not load html5 tag names into the document. Any unrecognized tags are ignored. Try adding a bit of javascript to manually add them (or use something like modernizr.js).
<script>
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
being loaded within a modal if that
makes any difference
Does your modal window use an iframe?
If so, you also need to run your HTML5 element shim script inside the iframe.
Use the HTML5 Shiv.
On a slightly unrelated note, you're using <hgroup> incorrectly. It's only supposed to contain one or more hN elements, and nothing more.
Using your code above, you should be using <header> instead.
I have the following CSS code
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
this is used in conjunction with the following markup:
<span class="editable"></span>
In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives?
Actually you should be careful here and read the detail. For full details, see this link - which states
In Windows Internet Explorer 8, as well as later versions of Windows
Internet Explorer in IE8 Standards mode, only the one-colon form of
this pseudo-element is recognized—that is, :before. Beginning with
Windows Internet Explorer 9, the ::before pseudo-element requires two
colons, though the one-colon form is still recognized and behaves
identically to the two-colon form.
Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before
Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.
IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to #toscho for testing!
Source
Detailed comparison of which browsers can deal with what sort of content
How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!
When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...
You may use the image as background for the generated content:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
{
content: '';
padding: 20px;
background: url("css.png") center center no-repeat;
}
</style>
<p>Test</p>
Works in IE 8, Opera and Mozilla. Live-Demo.
This is going off of Pekka's awesome example...
My heights on my project was to tall for the row... So I added a padding-bottom: 0px;
Just in case you rain into this....
.icon-spinner:before {
content: '';
padding: 15px;
padding-bottom: 0px;
background: url("css.png") no-repeat left top;
}