inditetheweb.com» CSS Tips and Tricks | Indite the Web | Web Development Tips, Tricks, and Tutorials

PNG Transparency Solutions For IE6

Kate — Mon, 27 Apr 2009 14:11:09 +0000

I’ve never really played around with PNG transparency because of IE6s lack of support. But, recently I wanted to use it on a project, and I knew there’s a Microsoft solution using AlphaImageLoader. So I gave it a try, and it worked fairly well. Until I went to click a link. And then I tried highlighting text. No dice. I assumed it was a z-index issue, so after trying a couple things myself, I did a quick search online. I came across this article:

http://www.hrunting.org/csstests/iealpha.html

And, it worked! (Didn’t need to add a z-index, either.) Now, bear in mind that the fix is to *not* set positioning on the element that you use a filter on. So it may not be right for your project. However, if your layout does rely on position:relative, consider using this:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

It’s a great JS library that easily whips IE6 into shape. I’m using it on a site that’s also using MooTools, and I’ve experienced no conflict issues, which is great.

I can’t wait until the percentage of IE6 users falls low enough to ease my mind about not supporting them. (I know many think it already has, but I’m holding on. At least for a little while.) The concession of sorts that I’ve made is that for IE6 users who don’t have JS enabled, obviously it’s not good news. But, in my opinion, to support both was just unnecessary.

Controlling the Textarea Tag In Safari

Kate — Tue, 20 Jan 2009 17:46:14 +0000

If you’ve used Safari for any amount of time, there’s a good chance you’ve noticed it allows users to resize textarea sizes. This can be a cool feature, but not always a good one. It’s not likely to do any real harm, but it may break your layout. Of course, some could argue that that’s the user’s choice. Well, I can see that. But for those times or people that require a little more control, use this:

textarea{max-width:200px;}/*Insert your value here.  Additionally, you could add textarea width and height values which ensures that it will look the same across all browsers.*/

Styling the abbr Tag

Kate — Fri, 19 Dec 2008 18:20:23 +0000

There are several ways that CSS can work along with SEO. Today, I’ll cover one quick option: styling the abbr tag.

Say, for instance, you have a link that states that your site is valid XHTML. Well, inside of the link use the abbr tag around the word XHTML. Inside of the abbr tag you use the title attribute to fill in what the word is an abbreviation for. When a search engine crawls your site, they not only come across your abbreviation, but also the value you’ve put in for the title. When hovered over, the title creates a tool-tip. By default the abbreviation will have a line below it. However, if you don’t want the line used, you would use this declaration in the CSS:

abbr{border:none;}

(For simplicity sake, I’m using an inline style here. Because I have the abbr styled in my CSS, I had to override it by manually inserting what the browser does by default:)

Without the style:
Valid XHTML

With the style:
Valid XHTML

See the difference? It’s quick but handy. Alternatively, you could use a different border or another style if you wanted to.

Two Of My Favorite Tricks…

Kate — Thu, 23 Oct 2008 18:09:40 +0000

CSS can be one of the most powerful tools a developer has in their arsenal. It can make changing styles a breeze compared to inline styles. But, it can also be one of the most frustrating tools a developer has. It’s not CSS in and of itself. Rather, it’s the support, or lack of support that’s frustrating. Even seasoned developers can encounter a problem that makes them sit back and scratch their head. While such problems have usually come from, (ahem), IE6, other browsers have their fair share of quirks. So, at least for now, I wanted to list two of my favorite tricks/techniques that I use when I code a stylesheet. Hope they’re helpful. If you have any comments or questions, feel free to include them in the comments section.


* {margin:0;auto:0;} /*This takes away a browser's default padding and margin settings for all elements, (which is what the asterisk indicates).  This way, you know you're starting from scratch, and elements will only have the spacing you want them to.*/


! important /*I always code sites to be cross-browser compatible.  One of the tools that helps me with this is the "! important" declaration. */

Basically, it works this way: Standards-compliant browsers, (Safari, Firefox, IE7, etc.), will recognize and apply this to the style you’ve assigned it to. However, for a browser like IE6 that doesn’t recognize it, it goes unnoticed. For example, say you needed to make up for a 3px difference in IE6 on a paragraph tag. This is how you could accomplish it:


p{padding-right:0px ! important;padding-right:3px;}

IE6 will see the ! important declaration and essentially ignore it. Then, it will hit the next “padding-right” declaration and add 3px to the right side of the paragraph. However, for the standards-compliant browsers, they recognize and use the “! imporant” declaration. What I like about this solution is that it’s perfectly valid CSS, so, at least in my eyes, it doesn’t seem like a true “hack”. (NOTE: The order in which you use this technique is important. The “! important” declaration must come before the second declaration.)