Design Woop | The Web Design and Development Blog » Hacks http://designwoop.com The Web design blog brought to you by David Martin Thu, 02 Feb 2012 08:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 PNG Image fix for IE6 http://designwoop.com/2009/08/png-image-fix-for-ie6/ http://designwoop.com/2009/08/png-image-fix-for-ie6/#comments Thu, 27 Aug 2009 12:14:16 +0000 Stu Greenham http://designwoop.com/?p=453 If you tend to put a lot of PNG images on your websites like I do, then you will know how much of a pain IE6 is! IE6 can display PNG images but it doesn’t play to well with transparent ones, in fact, the transparency won’t work at all! To get around this I have been using the following css hack to display a GIF image in IE6…

background:url('../images/image.png') !important;
background:url('../images/image.gif');

The hack is the !important part of the CSS, because if you put !important after a line in your CSS, then it will take precedence regardless of what appears after it, except in IE! This means for all browsers the PNG is displayed, but for IE the second line containing the GIF is displayed.

This is a good solution for most, and I have used it to get around the IE6 problem on several sites I have designed. Fortunately, there is another option which uses JavaScript to let you display PNG’s properly in IE6, with working transparency!

The DD_belatedPNG script was so simple to setup and so far it has worked like a charm! I have not had chance to fully test it but from what I have seen, it looks good! Here’s how to set it up for your website:

1) Download the JS file from here.

2) Include the following script in the header of your website:

<!--[if IE 6]>
<script src="http://www.domain-name.com/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('');
</script>
<![endif]-->

3) Finally, the fix(”) part of the script requires you to include any classes or id’s from your CSS that have PNG images set as their background. See the example below:

<!--[if IE 6]>
DD_belatedPNG.fix('.class1, class2 img, .class3, div.class4');
<![endif]-->

As long as you have your CSS Selectors correct inside fix(”) then the PNG’s should now display correctly within IE6! If you need to test out your site in IE6 then you can use IETester which is free and can be downloaded from here.

]]> http://designwoop.com/2009/08/png-image-fix-for-ie6/feed/ 2 Reverse Your Email with CSS and Prevent Spam http://designwoop.com/2009/04/reversing-email-with-css/ http://designwoop.com/2009/04/reversing-email-with-css/#comments Thu, 30 Apr 2009 19:56:12 +0000 Stu Greenham http://designwoop.com/?p=293 SPAM… Literally the most annoying word! When I used to work in IT Support, I would constantly get asked how to stop spam, and my reply would always be that you can’t! There is only so much software you can install / filters you can set going before you realise, the spam eventually reaches you anyway, fact! It’s just part or web life.

This is a cheeky little tip that will help preventing ‘spam bots’ getting hold of your email address. Next time you have to display your Email on your website, use the following code….

CSS:

span.test {
  direction: rtl; unicode-bidi:bidi-override;
}

HTML:

<p><span class="test">moc.tset@tset</span></p>

The CSS reverses the direction of the text, so you write your email backwards, the CSS sorts it out so it displays fine on your website, but this way, ‘spam bots’ can’t read your email! woop!

]]> http://designwoop.com/2009/04/reversing-email-with-css/feed/ 11 Removing the Dotted Hyperlink Borders http://designwoop.com/2008/10/removing-the-dotted-hyperlink-borders/ http://designwoop.com/2008/10/removing-the-dotted-hyperlink-borders/#comments Sun, 12 Oct 2008 09:53:58 +0000 Stu Greenham http://designwoop.com/?p=132 I love Firefox, it is my favoured browser but there is one little thing that really frustrates me, especially from a designer point of view. You may, or may not have noticed that the browser adds a dotted border around hyperlinks that only become visible upon activating the link. For many this is probably not a problem as its not exactly causing any problems to anyone, but I don’t like it.

To remove this border, all you need to do is add the two lines of code shown below to your sites Stylesheet and wahlaaa, gone! Many of the big sites haven’t even bothered to do this, a few to mention are Microsoft, Twitter and YouTube.

Anyways, here is the code…

a:active { outline: none; }
a:focus { -moz-outline-style: none; }

I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…

]]> http://designwoop.com/2008/10/removing-the-dotted-hyperlink-borders/feed/ 13