Solving IE7 & IE8 PNG Opacity Problems. How to fix transparent png issues associated with Internet Explorer's alpha filter. July 18, 2011 PNG Alpha-transparencies IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture. When setting any value for opacity, even 100% (ie. filter: alpha(opacity = 100)), IE fills in the alpha-transparency of the PNG with a pure black fill. This is sometimes refered to as a 'black halo'. The alpha filter can be removed at any time to remove the fill and restore the alpha transparency, but supporting both requires using more of IE's propriatary filters.
All of the follow examples should be placed in a IE-targeted conditional comment. Screenshot Gradient filter fix This is a great little hack that avoids the drawbacks associated with using AlphaImageLoader. Colorbox uses this technique for alpha channel support in IE8 and IE7. AlphaImageLoader filter fix This is how Colorbox enables PNG alpha-transparency support in IE6. Hey, Animated 3D Flipping Menu with CSS. CSS3 PIE: CSS3 decorations for IE.
Added twelve column support · 079bc2e · offshoot/Skeleton. Html - How to fall back to a google web font if the user doesn't have eg helvetica installed. Software/Fonts. Fonts Lists of Free/Libre and Open Unicode fonts Draft Recommendations for Default Unicode Fonts By Script Introduction Free/Libre Open Source (FLOSS) desktop infrastructure has matured rapidly in the last few years. As part of this phenomenon, an increasing number of modern Unicode fonts for numerous human scripts have become available under FLOSS licenses such as the GPL, Vera Bitstream-style licenses, and, most recently, the Open Font License (OFL) An additional number of fonts are available for "free download" under licensing terms that are not yet as clear as many in the Free/Open Source and Free Desktop community would like.
A number of these Free/Libre and otherwise open Unicode fonts are referenced in Ed Trager's Unicode Font Guide For Free/Libre Open Source Operating Systems on unifont.org. The task of choosing a set of default fonts has both objective and subjective aspects to it. Testing Notes About Terminology Used in Font Classification African Scripts. Fontdirectory - Download Google Web Fonts. Is there a web-safe Helvetica Neue CSS font-family stack? « Rachael L. Moore. Or: I would love to know how to use Helvetica Neue on the web Or: No, really, was this always so complicated? In this context, when I say “safe”, I don’t mean “using only web safe fonts”, I mean “how the heck do you get the non-web-safe-font to show up when you know you have it”? I never noticed before having so much trouble figuring out what a font’s name should be in a font stack.
Sometimes, for a particular system, I’ve looked up a “better” font to add to the font stack, but.. Wondering what I’m talking about? It’s relevant to a design I’m working on right now. Unfortunately, searching the web for how to do this has raised more questions for me than it answered. The challenges are several: First, it seems that different systems — either having to do with the operating system or the browser — deal with spaces differently (or something)? #1 – Spaces? One system might recognize “HelveticaNeue” and another “Helvetica Neue.
. ” #2 – Weights and Stretch Grasping at Font Stacks. Border-radius (CSS) — Browser Support. Form Elements: 40+ CSS/JS Styling and Functionality Techniques. Aug 17 2008 Designing effective web forms isn’t easy, as we need to figure out more practical styling and functionality techniques to provide a great user experience. Recently there have been a number of noteworthy techniques such as styling different form fields, live validation, Context highlighting, trading options from field to another, slider controls and more – using CSS and different Javascript libraries. Below we present findings of search to more than 40 tutorials and demos to showcase the capabilities and robustness of CSS and Javascript. You might be interested to check other CSS related posts: 1-Styling dropdown select boxes- To style a dropdown select box is heavy work. 2-<select> Something New, Part 1-With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful… and you won’t have to sacrifice accessibility, usability or graceful degradation. 3-Styling even more form controls-There are a lot of controls that can be used in an HTML form.
Homepage. Download Hundreds of Free @font-face Fonts. Removing The Dotted Outline. Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility.
For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link). You can try it for yourself by clicking on a link and mousing off of that link before letting go. Usually, this default styling isn't a big deal. Bear in mind that this styling literally uses the "outline" CSS property. How to remove it If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset: Make sure to add in new focus styles a:hover, a:active, a:focus { // styling for any way a link is about to be used } Wow. Flash Firefox Inputs Share On. CSSrefresh - automatically refresh CSS files. Font Stack Builder | Build and preview your CSS web font stacks! Want to preview your own header text?
Just edit any box and hit "Return" to update. Paragraph text is static. Ideal Font Start by choosing your ideal font, often the least-commonly available in the stack. You can leave this (or any other) field blank if your ideal font is also on one of the other lists. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Percent of users will have this font Mac Option Next, choose a fallback for Mac users (roughly 12% market share). Windows Option Now, choose a fallback for Windows users (roughly 85% market share). Linux Option And last, a fallback for Linux users (roughly 3% market share).
Web-Safe Font "Web-Safe Fonts" are fonts that are installed on nearly all computers by default. Default Last of all, specify a general fallback for the tiny percentage of users who do not even have the "Web-Safe" fonts available. Voila! Credits Site design © Erin Lawrence, 2011. Mm. The League of Moveable Type. DD_roundies: Code-only rounded HTML boxes. 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. Things have changed.
I spent some time away from the project before IE8 final was released. When I came back to it, much had changed. Too much. The 80/20 rule was replaced with what I'd call the 95:5 rule. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead.
This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Table of Contents Quick summary: DD_belatedPNG: Medicine for your IE6/PNG headache! 2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS.
If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach) How to fix the superscript and subscript line-height problem with CSS. If you code CSS / XHTML, you are most likely familiar with the Superscript and Subscript tags.
If you use these tags in a situation where there are multiple lines of text you might run into a common problem. The problem is that the Super or Subscript characters push the lines of text further apart to make room for the character. This leaves you with an ugly looking block of text, with 2 lines with too much space between them. What needs to be done is to undo this default setting of pushing the lines apart. Here’s is the CSS to do just this. You might want to add this to your CSS reset style sheet, so you don’t run into this problem in the future. Here’s another method some people use which you can try.