Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.

Why do users click again?

Because they are users! They aren’t developers who understand what happens in the back end.

Its our job as developers/designers to let the user know that the results are being loaded and to ask them to wait until it loads.

How do I do it with just CSS?

Its pretty simple. Click and hold the search button below and see.

I am sure, I don’t have to explain how it works for the experts, but if you are novice continue reading…

The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded. You can download the sprite here.

Now, how do I avoid multiple clicks?

Its impossible to disable a button just with CSS, but we can ask the user to wait by replacing the hand/pointer with a “wait” cursor. So this is how the final CSS code looks like.


input.submit{
width:16px;
height:16x;
display:block;
overflow:hidden;
text-indent:-999px; /* To remove any default text on the button*/
line-height:16px; /* required for safari */
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
cursor:pointer; /* Hand cursor for the normal state */
border:none;
padding:0;
}

input.submit:active{
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
cursor:wait; /* Shows the wait cursor on click */
}


If you really want to disable the button, check out this JQuery solution. And, don’t forget to put in your thoughts and ideas.

Related posts:

1. IE not interpreting text-indent on submit buttons ?
2. 10 CSS properties that ‘were’ impossible to implement in IE6
3. IE CSS hack without using any hacks!

This post is about 10 commonly used css properties that were impossible to implement in IE6. While redesigning ProductiveDreams, I came across a few css compatibility issues with IE6 and had to spend hours searching the solution for each issue.

So I just thought of putting them together to save your time. These css hacks (I would rather call them ‘solutions’ since, not all of them are purely css based) solves the major compatibility issues in IE6.

1. Rounded or Curved Corners

As you would know, all modern browsers support border radius. Curved corner is something that was merely impossible to achieve in IE6. Recently I came across an htc file (especially for IE) developed by Remiz from HTMLRemix.com, which solves this issue.

The first thing to do while using htc is to add the correct MIME type for htc behavior on your server. This is REALLY important before you proceed. The following are steps:

1. Go to your cpanel and click the MIME Types link
2. Under MIME Type, add text/x-component
3. Under Extensions, add htc
4. Restart Apache Web server

For more details on how to add MIME type visit Microsoft Support

All you need to do is download the htc from HTMLremix or Alternate Link and include the following code in your CSS.


.div_class_name{
behavior:url(border-radius.htc);
}


Jquery Alternative: jQuery Corner a jQuery plugin that creates crossbrowser compatible rounded corners!

2. The popular PNG transparency issue

Every designer would have faced this issue, obviously! Though there are a number of javascript based solutions, I couldn’t find anything that supports background position. As far as I know all JS based solutions end up with the same result. This is something that worked flawlessly for me. All other solutions are based on this filter.

Preview


.class_name{
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
}


HTC Alternative:If the solution above doesn’t work for you, you may try this htc alternate.

Known Issues:
1. Doesn’t support CSS Sprites: If you are using sprites, then just forget this hack. Background positions doesn’t work with PNG hacks .

If you need background-position support for PNG, then go for DD_belated

The best solution is to use a .gif or png-8. Check out the best way to do this without using hacks!

3. Opacity

This is pretty much straight forward and easy to achieve compared to the other hacks.

Preview


.opacity_div {
filter: alpha(opacity = 50);
}


4. Fixed position

All browsers support the css property ‘position:fixed’, but not IE6. I had to find a solution for this since the social icons in this blog are having a fixed position.

Preview


* html .fixed_div{
position: absolute; /* position fixed for IE6 */
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}


Just change the top(104) and left(15) values, to position the element.

This method works very well, but you would notice a jerk while scrolling the page. So here goes a fix for that.


* html {
background-image: url(image.jpg);
}


All you need is a 1px x 1px image. This might sound weird but it works!

5. Min-width & Max-width

This is simple as well and was already posted on ProductiveDreams

Preview

Min-width:

.div_class_name{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}

Max-width:

.div_class_name{
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
}


Jquery Alternative: This is an alternative solution for the hack above. JQminmax is a cool plugin which allows you to set minimum and maximum values for both width and height.

6. Hover for non anchor elements

Unfortunately, IE6 supports :hover, only for anchor tags. That means css based dropdowns would not work in IE6. CSShover.htc is the best solution for this. You may download the htc file from xs4all.nl

Preview


body {
behavior: url("csshover3.htc");
}


As I mentioned previously, don't forget to add the correct MIME type for htc behavior on your server. This is the key.

7. Min-height & Max-height

Preview

Minimum height:

This is not really a hack since it uses valid css.


.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}

Maximum height:

.div_class_name{
height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
}


8. Bicubic scaling for images

One line code that solves the image scaling issue in IE6 and 7. Hats off to Chris Coyier for coming up with this solution.


img {
-ms-interpolation-mode: bicubic;
}


9. Negative text indent for input buttons

Negative text indent is normally used to hide the text value inside buttons, which lets you use custom background images for them. For some reason, IE doesn't support negative text indent for input buttons. For more details about this issue check out this post

Preview


input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/button_image.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}


10. Text shadow

The shadow filter is one of the useful filters for IE.

Preview


.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}


Related posts:

1. IE CSS hack without using any hacks!
2. Min-width issue in IE6
3. IE not interpreting text-indent on submit buttons ?

The following image(button background) has been used for this tutorial. You may right click and save it.

1: HTML Code

Create a HTML page and insert a button with a class, “button”.




2: Style Sheet

I included the following in my stylesheet.

input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}

Fixed width, overflow:hidden and negative text indent will hide the text of any button. This works well in all browsers except IE.

3: The Problem

The image below shows how IE displays the button.

You can see the black text within the button which looks odd.

4: IE Fix

So finally, here goes the three line CSS code that does the work for you.
Modify your CSS as shown below.

input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;

font-size: 0;
display:block;
line-height: 0;
}

5: How it works

Let’s see how it works.

font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.

display:block Negative text-indent works in IE only if this is added.

line-height: 0 Another fix for IE6.

I have included the sample files for your reference.

Related posts:

1. IE CSS hack without using any hacks!
2. Min-width issue in IE6
3. Trend Review: Price Tags (Part 2)

Step-1: Let’s review the HTML part first.



The following are the images that I’ve used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.

Colorful PNG Image

Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
width:134px;
height:134px;
}
Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I’ve specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?

Step-3: Solution for IE

This the most interesting part that does the magic.

I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);

Check out the result in IE! Awesome…. isn’t it? In all other browsers except IE you will see the colorful png image.

Consolidating the entire thing

So. the final css would look like:
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
background-image:url(images/pd.gif);
width:134px;
height:134px;
margin:0px auto;
}

For your ease, I have attached the sample files as a zip. Feel free to download it and do let me know your feedbacks.

Related posts:

1. Min-width issue in IE6

The problem was to make it compatible on all major browsers, including IE6 !!!!!. I wonder why people still use IE.

As usual, I started searching for the solution on the right top of my Firefox window (yes, google!) and found a few websites which had discussions on the same topic. Most of them had lengthy posts and not the real solution. After going through a couple of sites, I concluded with the following solution. I hope this would help those who come across the same problem.
.div_class_name{
width: expression(document.body.clientWidth < 1002? "1000px" : "auto");
}
Just add the above line in your CSS. Replace 1000px with the min-width value and replace 1002 with a value slightly greater than the min-width. To define the max-width, just replace the "<" with ">".

Known Issues:

• Only works with JavaScript enabled browsers
• Not W3C valid

That's all! I don't want this post to be lengthy like the others I went through

No related posts.