Get Rid of Those Dotted Lines Around Links in Firefox
I just always assumed that these were a fact of life with Firefox. They are meant to give an idea to the user where their focus is if they are using the keyboard to get around the page. But when you use text-indent to do image swaps for navigation elements the dotted lines shoot off into infinity on the left side of your screen. Found an easy solution from Nathan Smith via Google:
a:active {
outline: none;
}
Check out his article for more information on how best to remove Firefox dotted links.
CSS Text Wrapper
- Wrap content to any shape. Including curves, slants, non-linear images, or whatever you can think of
- Trace images for quick creation
- Content Independent Your content and text can change but your wrap shape will stay the same.
- Multiple Export Methods help ensure you can find an efficient way to add the code to your site.
Overview
The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape. Jump down after the video for more information.Video Example: How To Use the Wrapper
This video covers how the wrapping works, how to use the wrapper to create a simple text wrap around two circular images, and how to add the generated code to your website or blog.How It Came To Be and Why It’s Better Than What’s Available
One of the things I do for contract work is coding PSDs to CSS/HTML. I stand by telling my clients, if they can design it, I can code it, so sometimes I get myself into a rut with a tricky design element. Well a design came along that had a curved layer of text around a curved graphic. The design was going into a CMS system so the content would be changed from time to time, and therefore needed to be independent of the markup. I found that by floating divs to the left and the right of the each line of content, you would be able to force the text into place. But it took a loooong time. Each div on each line required tweaking over and over again pixel by pixel until it was just right. There had to be a better way to do that.
Feedback
The Wrapper is very new and still needs a lot of work. So please leave me any problems you find, as well as suggestions and examples of work you’ve done with it!FAQ
Q: Long single strings without spaces (like long URLS) do not wrap? A: This unfortunately is the same behavior you’d see even if you didn’t use the wrap. Your browser will not break up long strings to wrap them. (Internet Explorer has some alternatives) Q: Does this mean I have to use flash on my website? A: No, flash is only used in the tool to create the wrap. You use it to draw the shapes you want to wrap, the tool then generates the CSS/XHTML code to make your wrap. No flash is required on your site. Q: Can I use this with standard inline images (img tag) and not just backgrounds? A: Yes, though you will need to use absolute positioning to put them into place.IE6 Background Image Flicker
Apparently, previously unknown to me, IE6 checks for a newer version of the background-image CSS property on links every time you move the mouse over a link. You can disable this behavior by running a short line of javascript:
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
I learned about this from:
http://www.mister-pixel.com/#Content__state=
PNG Hover
Overview: The Problem
You want to use a Sliding Doors technique for your beautiful css/list-based rollover menus with PNG transparency, but in IE6, the transparency does not work. I won’t spend time explaining how to do a sliding doors rollover, if you don’t know how to, you definitely should. You can view a good tutorial on how to do an Advanced CSS Rollover here.The Solution
The solution is a 1-line-of-code-fix. Simply download the script, which contains two variables to set. Then add the following line of code near the bottom of any page with your menu. <!--[if IE 6]><script type=”text/javascript” src=”/j/pngHover.js” /></script><![endif]-->
Jump to download the script
An Example, Dismantled
Markup
As I said before, this is for a sliding-door CSS navigation, so the HTML markup should be similar to the following. You can use Suckerfish Dropdowns! However, this script will only apply the fixes to the top level of menu options. <ul id=”nav”>
<li><a id=”item1” href=”page1.html”>Page 1</a></li>
<li><a id=”item2” href=”page1.html”>Page 1</a></li>
<li><a id=”item2” href=”page1.html”>Page 1</a></li>
</ul>
Images
A Sliding Door CSS navigation uses a single image file that combines both the default and rollover states. See the example below. You can have the states on top of each other, or side by side. You will need to specify in the file which one you are using. It should be noted that both states need to be the exact same size. Here, the default graphic is on top, and the rollover (or hover) graphic is on the bottom.
Here, the default graphic is on the left, and the rollover (or hover) graphic is on the right
The Script
At the top of the script you will see three variables you need to set. The first is navId. This is the id of the main UL element in your markup. If you look up at our example, you’ll see our example’s id is nav. The second variable you need to set is slideSide. This tells the script which way your image file is layed out. Our example is layed out side to side, so we enter ‘leftToRight’. The last variable says where you put the transparent.gif file that comes with the script. Here is what our variables would look like: navId = ‘nav’;
slideSide = leftToRight;
transparentImage = ‘/j/transparent.gif’;
The Final Markup
Now let’s bring it all back together. Hope this helps people as much as it has helped me! <ul id=”nav” >
<li><a id=”item1” href=”page1.html”>Page 1</a></li>
<li><a id=”item2” href=”page1.html”>Page 1</a></li>
<li><a id=”item2” href=”page1.html”>Page 1</a></li>
</ul>
<!--[if IE 6]><script type="text/javascript" src="/j/pngHover.js" /></script><![endif]-->