Common Web Design Mistakes - August 28th, 2008

There are many major and minor mistakes people have and are making with regards to web designs. For today’s post, I have decided to mention a few web design tips that were good in the 90’s but are looked at with hate (Similar to IE…).

  • Do not use Blinking Text
    This and Web 2.0 don’t gowell together.
  • Don’t use a splash page
    It’s very SEO-Unfriendly.
  • Don’t have sound playing in the background
    If you must so, let the user switch it on via a button.
  • Use colours that match
    I.e. Bad Colours
  • Keep pages short
    Otherwise, say goodbye in advance.
  • Don’t let users think
    This gets them frustrated.
  • Keep everything simple
  • Don’t use frames
    The source of many problems.
  • Separate JavaScript code and CSS styling from the HTML via external files

That’s all for today.

Ahmed Bhula
Web Developer

Posted in Web Design | No Comments »

Use PNG Images in IE6 - August 14th, 2008

Many of us will know that Internet Explorer 6 (IE6) does not support PNG image types. Although this is the case, today, I’ll show you a nifty trick that will allow PNG’s to be used within IE6.

How is this worked around? We use the AlphaImageLoader filter in CSS.

We use two div tags, one which is for IE only and the second for all major browsers. IE7 will be able to view both and so we have to force it to use one only. Confused? Read on.

Let me explain, if we make a button with a transparent background using a PNG image, we first need to make a div for browsers that doesn’t support PNG images and another div for those browsers that support PNG.

Now the code:

HTML:

<div id="ie6_button"><a href="#"></a></div>
<!-- No text here as the other browsers will use the div below -->
<div id="general_button"><a href="#">Click here</a></div>

CSS:

#ie6_button a{
display:block;height:50px; width:100px; float:right;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/button.png', sizingMethod='scale');
}

#ie6_button a:hover{
cursor:pointer;display:block;filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader (src='/images/button_over.png', sizingMethod='scale');
}

Internet Explorer 6 and 7 will be able to read all the code above which other browsers won’t except for the image dimensions.

The code below will target other browsers including IE7

html>body #general_button a {
color:# 66cc99;
display:block;
text-transform:uppercase;
font-size:9px;
float:right;width:100px;
height:50px;
position:relative;
left:149px;
background:url(images/button.png) no-repeat right top;
text-align:right
}

html>body #general_button a:hover{
background:url(images/button_over.png) no-repeat right top
}

AS IE7 recognizes the AlphaImageLoader code, we target it to use AlphaImageLoader only. How is this done? See below:

*:first-child+html #button {
background:none;
/* This makes IE7 use ImageLoader only */
}

Remember to keep the position of the general_button relative so it’s not pushed aside by IE6.

IMPORTANT:

  1. AlphaImageLoader will not work in IE6 unless you have ActiveX installed.
  2. This may not be too practical most of the page has a transparent effect. You can consider cutting the PNG short using a background colour or image if possible.
  3. ONLY USE THIS TECHNIQUE AS A LAST RESORT. Why? It’s not future proof.

Ahmed Bhula
Web Designer

Posted in CSS, Web Design | No Comments »