MCP4

Just a heads up to let everyone know that Ratings are now available, so please feel free to leave a rating or comment (or both!) on any of the blogs.

Leave your rating!

In this new “Getting your hands dirty” series I hope to show people some handy work-arounds, hacks and oddities.

In this first instalment, we are going to be cover, how to style the <form> Submit Buttons. In comparison to styling input fields, there is very little information out there.

Doing a Google search returns 200K+ results, versus 126,000,00 for styling input fields! Even then, most of the methods involve,

• Using <a> or <span> and then form.submit();
• Using Javascript to do a dynamic image replacement.
• Using an <input> type “Image“

These method have advantages (images can look great), but also have serious disadvantages (usability problems, Javascript requirements, lots & lots of CSS, etc…)

So lets talk about an alternative method, using backgrounds and gradients. The big advantages of this method are,

• Requires very little CSS, very little images, thus faster to download.
• Works even if Javascript is disabled.
• Degrades gracefully in older browsers

Lets make a first stab at it in Example 1,

input[type=submit] /*apply to Submit buttons only */
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

In this example we are using an attribute selector, however as IE 6 doesn’t support this and we want cross platform support as much as possible, lets use the standard class method.

In Example 2, we have added a class attribute to the submit button. Looking good.

.button
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

Next, in Example 3, lets use the “hover” attribute to give a Rollover style effect.

.button
{
    background: url(img/basic.gif) repeat-x;
    height: 30px;
}

.button:hover
{ /* change background when mouse hovers over */
    background: url(img/basic_on.gif) repeat-x;
    height: 30px;
    border: 2px solid #000;
}

Note: IE6 (and below) do not support “hover” on anything but links, so no roll overs in IE 6.

Finally, in Example 4, lets put it all together and show a couple of variations. Go here to see how the buttons are rendered in IE 6.

Conclusion
Using simple CSS techniques you can achieve great looking Submit Buttons, without using heavy weight Javascript and without the usability problems of Image buttons. Kevin Hale also has a great blog an alternative approach using button elements instead.
Download: Examples

Hope you found this first “getting your hands dirty” tutorial useful.

Next Blog: MCP4: A S.E.O. exercise, part 1.

Robert

For 2 or 3 years people have been asking us when the next version of MCP will be coming out and our reply was always the same: “When its done“. Leading many people (myself included!) to wonder if it would ever really come out.

At long last I am delighted to announce,

Its been a real labour of love to get it to this stage and we are really proud of how MCP4 has turned out.

MCP4 has been in private Beta, with a few select customers, since November last year. It reached feature complete status a few weeks back. Right now it’s going though our QA process, also the support side, video tutorials, installation & user guides, are been worked on, feverishly! We have taken on-board all the criticisms people have with the current support files/layout, this is why we are giving ourselves an extra 7+ weeks just to get everything just perfect.

Hopefully will be updating this blog 2 or 3 times a week in the build up to MCP4s release, with lots of details and one or two special announcements;), so be sure to subscribe to our blogS RSS Feed. Its safe to say we have learned alot during the last two years, so I’m hoping to share some of my and the teams experiences and also give people an insight into how professional membership software like MCP4 gets developed.

Next Blog: Getting your hands dirty

See you than.

Hey,

Welcome to the new MCP4 blog. This is just a quick blog to give you an overview of what we want this blog to be about.

We are a technology / security company, so our blog will primarily cover these areas. However, we have been selling MCP in one form or another since late 2000, so we have a fair bit of business experience too, so expect some “doing business online” posts also. We already have a good few ideas for blogs, so the next few weeks in the led up to MCP release should be very busy.

Some areas that we will be coving in upcoming blogs: SEO tips, Competitor comparison, ANT & PHP automation, GZ compressing, CSS and a bunch more.

Lastly, we also hope to have a few guest bloggers, but more about that later…

Don’t forget to bookmark our RSS feed!

Next blog: “When it’s done”, well its nearly done!