Internet Explorer Pickiness With CSS

For a browser that is hardly standards compliant, Internet Explorer still infuriates me and acts as my arch enemy when debugging CSS. How about an example?
This code works in Safari, FireFox, Opera but not IE:

 .heading {
 	background: url("images/heading-bg.gif")repeat-x;
 	color:#fff;
 	font-size:1em;
 	margin:5px 0 5px 5px;
 	border:1px solid #292929;
 	padding-left:3px;
 	line-height:21px;
 	}


The result: The background image is displayed properly in Safari, Firefox, Opera, etc but not IE. IE failed to display any background image at all.

This code, the same as above with one minor difference, works in Safari, FireFox, Opera and IE:

 .heading {
 	background: url("images/heading-bg.gif") repeat-x;
 	color:#fff;
 	font-size:1em;
 	margin:5px 0 5px 5px;
 	border:1px solid #292929;
 	padding-left:3px;
 	line-height:21px;
 	}


The result: The background image is displayed properly in all browsers.

What is the difference? There is a space in between the “)” and the word “repeat”. Mind you, both of these validate.

This is just the tip of the iceberg when it comes to cross checking different platforms and browsers. Hopefully this will help someone when they are super frustrated with the same problem.

Dropdown CSS/Javascript Menus

If you ever need to implement drop down menus and want to use clean CSS/javascript code, check out: Son of Suckerfish Dropdown menus. I have implemented these on a few web sites now for my clients and have been very happy with the results. If you are using WordPress, you can also use to dynamically generate the drop down menus. Enjoy!

wordpress documentation.

As most people know, I am a huge fan of WordPress. I get a number of potential clients that ask to help build their company or organization a web site which is easy to update without knowing any HTML. Of course – 9 out of 10 times I start talking about the benefits of WordPress. As a developer as well as someone who does not want to depend on someone else for a lot, I really like all the documentation and examples or “lessons” that are available for WordPress. When clients see all the documentation, their minds are more at ease and often feel more empowered which make me happy. If you are interested in working with WordPress or have a WordPress blog currently but are looking to do more, I recommend the following resources:

  • Working With WordPress – A one stop shop of information on everything from how to create a post to what user roles are to how to create a plugin.
  • WordPress Lessons – Basic lessons to help you get to know and feel more comfortable with WordPress
  • WordPress Advanced Topics – More advanced WordPress information if you want to use WordPress for photoblogging, create templates, etc
  • Google “WordPress Howtos” – There are several video and written tutorials out there.

Of course, I am always available for hire if you have any development needs.

Fun with mod_rewrite

Apache’s mod_rewrite is very powerful. You can prevent hot-linking to your site’s graphics to prevent others from stealing them, redirect your from your old URL to a new URL, re-write URLs, as well as about 500 other really cool things…but today I wanted to share the syntax needed to redirect every incoming URL for a particular web site to a specific page. Why? This could come in handy when doing work on a site and you have a “Performing Updates” (in this case index.html) page. You can put the following code in your .htaccess or httpd.conf file:

# Enable rewrite engine
Options +FollowSymLinks
RewriteEngine On

# Redirect internally all URLs to /index.html
RewriteRule .* index.html [L]

writing php with komodo ide.

My online PHP training is now complete. I feel like I learned quite a bit and am ready to start tackling some exciting projects I have in my queue. Not only did I learn about some good practices, I also finally made time to look at some development environments. After some comparisons, I have choosen to play around with Komodo IDE Active State also offers a free editor called Komodo Edit if you are interested in a simple bare bones editor. If you are at all curious about Komodo IDE, be sure and check out the free Discover Komodo IDE 4.webcast.

What do I like about it?

  • Debugging
  • Auto-completion
  • Syntax checking
  • Clean interface
  • Plays nice with subversion

if you want a web site redesign…

If you have thought it through and tried to make small changes but you are still unhappy with your site, here are some things to consider:

  • Existing successful web sites. The first thing that I do as a web developer/consultant is ask my clients to list three-five web sites they like and find easy to navigate. This not only makes them think about what they consider good practices, it also helps me to create a “best of the best” web site for them based on real usable web sites and not abstract design thoughts.
  • Color/Branding. I also ask to see their letterhead, logo, or anything else the individual or company uses. I feel it is very important for companies to set a consistent and professional tone for their users and visitors. Brand recognition is key in most markets. There are a number of web sites that can help you choose a good color palette – use them. (Adobe Kuler is a good example)
  • Purpose. I recommend really thinking about what users are looking for when they come to your web site. If your site’s purpose is to provide information to the users, make it easy to find that information. Users will appreciate being able to find the information much more than the expensive flash animation when the site loads regardless of how cool it might seem. There is a time and place for most everything. Once you figure out your purpose, do not get distracted. (Think Google.com)
  • Audience. Know your audience. If you expect a large number of users to be on a certain platform using certain browsers or using cell phones to access the site, make sure you spend some time and optimize your code appropriately. With a little effort, you can also do a lot to your site to make it more readable and accessible for people with disabilities. Be sure and also analyze your logs to get more demographic information (this is invaluable).

Although the list of items seems pretty straightforward, you would be surprised how many people do not consider any or all of them. If you can address all the items above, you will be on the right track to creating a successful web site. Have a project you need help with? Contact me, I would be happy to help out.

a little goes a long way.

I have had a number of people ask me to help them with their web site redesigns/re-development because they are unhappy with how their current site looks. Usually I hear one of two comments:

  1. “I have been using this design for x years and I need a complete redesign.”
  2. “X in the company is complaining he cannot find anything on our web site.”

What most people fail to realize is that there are a lot of ways to revive aging web sites that are quick and easy – and best of all – do not require the users to completely relearn an interface. Successful web sites are successful, not because they constantly change, but because they constantly improve and build on their existing layout – and there is a big difference.

Two successful web sites in my opinion:

Why are these web sites successful? They have a strong foundation (navigation, general layout, content placement) and instead of doing complete redesigns, they have made tweaks, added new features, and addressed any problem areas over time. When users go to either of these web sites they know exactly what to expect – and users like that. Unless the web site is a complete disaster, the users would much prefer to have small fixes and general user interface changes than to have to relearn (and re-define new problem areas) something completely new.

So back to the quotes above…next time you think your company or personal web site needs a complete overhaul take a step back. Ask yourself if there are some small changes that you could make before you scrap what you already have. Perhaps you just need to move the search box, re-work the navigation, or change a few graphics to freshen it up a bit. If find yourself with someone constantly complain about something – sit down with them or talk to them regarding their issues and remember – not everyone will be happy with your user interface. It is always best to do surveys and to look at your log files with something like Summary or Google Analytics to see what people are searching for, what pages they enter and exit on, and what pages get the fewest and most page views. This data will help you highlight the most frequently referenced information as well as point out what users do not find important, or just cannot find.

To wrap it up:

  • A little goes a long way. Take small steps to improve your existing framework (as long as it does not look like 1997 got stuck on your web site) Users like feeling comfortable.
  • Talk to your users to find out what they like and do not like. Education works both ways.
  • Use tools that will show you traffic trends so you have some concrete data to work with.

php training update.

I have to say I am enjoying the PHP Essentials training a lot more than I had originally thought. I am learning quite a bit and ended up working on my “homework” last night for a few hours. I have never had any formal training so it is nice to have someone start from the beginning to make sure I have a solid foundation. At the end of the month, I am going to also be taking the PHP Full Immersion class. If you are interested in getting some formal PHP training, I highly recommend PHP Architect training.