Notice how one of them has no favicon and a particularly unhelpful title. Now I’ll have to click on that tab (or press CTRL+3, or whatever)
to find out what it is – how annoying, I shouldn’t have to do this.

Because I can tell that you’re smart – I know that you want to use favicons on your site. It’s pretty easy – just create the icon and add some codeThe easiest way to get some favicon action is to use an online ico generator, here are some:

• Favicon.cc
• Dynamic Drive FavIcon Generator
• Favicon.co.uk

Then just add a some lines of code to your template:

<link rel="icon" href="http://yoursite.tld/favicon.ico" type="image/x-icon">

It’s worth noting that some browsers automatically search for “favicon.ico” on the document root of your website so it might be a good idea to name it “(httpdocs)/favicon.ico”. If you don’t want to do that, you can save it anywhere and just use a PNG file, just change the MIME type:

<link rel="icon" href="http://yoursite.tld/favicon.ico" type="image/png">

I personally prefer to edit my favicons locally, so I can make them transparent and high resolution for extra shine. Keep your eyes out for a post on that.

Related Posts:

• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• XHTML and HTML5 Compliant Flash – Stop Using Embed and Invalid XHTML/HTML5
• Launched: Artist Guysel
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• PNGs Have Different Colours in Different Browsers?
• New Content brings Crowds

1. Close all tags, use lower-case tags, use lower-case attributes and maintain nesting order.
2. Markup is for content, CSS is for presentation. That one was easy.
3. Use the right tag for the right job (in the right place) and make things accessible.

However, one thing that can’t be covered by a general rule is the complete removal of tags. Most removed tags were non-standard and started out as proprietary – like <marquee> and the tag we’re going to talk about, <embed>.

The <embed> tag was used to ‘embed’ objects (plugins) into a web page. Even though it’s not a standard tag, it had become the de facto method of inserting an object (like a Flash object, or a video) into a web page. You’ll notice that the code YouTube, PhotoBucket and other sites provide for you uses the <embed> tag and therefore this practice is known as “embedding”. Even though these sites still use it, that doesn’t mean you have to. “Embedding” objects without using is actually very easy and cross-(modern)browser compatible. Dear reader, please meet the HTML5 and XHTML-compliant <object> tag.

Valid HTML5 and XHTML Flash Tag

Rather than explaining it to you first, I’ll show you the before and after of some YouTube “embed” code.
Before:

<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/bz8Pv-QeNQI&hl=en_GB&fs=1&"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="http://www.youtube.com/v/bz8Pv-QeNQI&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

After:

<object type="application/x-shockwave-flash" style="width:425px; height:344px;" data="http://www.youtube.com/v/bz8Pv-QeNQI&amp;hl=en&amp;fs=1">
	<param name="movie" value="http://www.youtube.com/v/bz8Pv-QeNQI&amp;hl=en&amp;fs=1" />
	YouTube Video, flash required.
</object>

Basically, this is all you have to do:

• Add a type attribute to the object, and set its value to "application/x-shockwave-flash"
• Add a data attribute to the object and set its value the param "movie" had as its value – or simply the path of the SWF
• Use CSS to set the width, height and position
• Maintain other params that you want, or delete the ones you don’t want

See, it works:

Actually for some reason it doesn’t work on my iPhone…

That is all, happy (valid) coding.

Related Posts:

• Making Your Site Stand Out With Favicons
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker
• Removing MovieClip Children from MovieClip in Flash Using ActionScript
• New Content brings Crowds

<a href="/">Home</a> |
<a href="/about/">About</a> |
<a href="/contact/">Contact</a>

I guess it’s OK to do that, but it’s not really great practice because the pipes ( | ) are not actually part of the content and are only meant for presentation, so they shouldn’t really be part of the HTML. Another problem with this is that it’s inflexible. What if we want more space between the pipes and the links? Do we enter a bunch of “&nbsp;”s? That’s ugly^.

We can use the CSS border property to add the separators for us by adding a left-border to each of the links.

“But what about the first link?“

The answer is the :first-child CSS pseudo-selector. It allows us to define CSS properties to the first element of its kind within a container. So in this instance, we can apply no border to the first child. Here’s how the lot would look:

<ul id="footer">
	<li><a href="/">Home</a></li>
	<li><a href="/about/">About</a></li>
	<li><a href="/contact/">Contact</a></li>
</ul>

ul#footer li {
    display:inline; /* so they display horizontally */
    border-left:1px solid #000000; /* our 'pipe' */
    padding-left:1em;
    padding-right:1em;
}
 
/* here it is, the first-child pseudo-selector */
ul#footer li:first-child {
    border:none; /* no 'pipe' before the first element */
}

It requires a bit more coding initially but it’s more elegant because it separates concerns and it’s also more accessible for screen readers and our friendly neighbourhood search engines*.

^ I know, this very site doesn’t follow this site doesn’t follow these practices. I’m a hypocrite!
* FACT

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker
• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• PNGs Have Different Colours in Different Browsers?
• Clean URLs Using Apache’s mod_rewrite and PHP – Beginner’s Tutorial

Have you ever been working on a website and noticed that in certain browsers a background image isn’t blending properly with one of your background colours or another image? This phenomenon occurs in Internet Explorer and it’s caused by metadata in the PNG file itself. There’s a great program that solves this problem without any hacks.

The problem? Gamma. Some programs (like Adobe ImageReady) export PNGs with Gamma metadata. While I’m sure this metadata could be useful, it causes colour inconsistencies in Internet Explorer (6 and 7 confirmed.)

Solution – TweakPNG. Download this Windows program – consistent PNGs are X steps away:

1. Open TweakPNG
2. Load the problem PNG into TweakPNG (Either drag and drop or File > Open)
3. In the list of “Chunk”s, select “gAMA” and press the delete key.
4. Save (Ctrl+S or File > Save)

Done.

Related Posts:

• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Making Your Site Stand Out With Favicons
• Nicer Footer Navigation with pseudo-selectors
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker

Unfortunately, this effect can’t be achieved without knowing and entering the width and height of an image – making it kind of tedious to implement. After deciding that I’d like to use it with wordpress posts, it was decided that a tool should be built. And then The Lovely Caption Maker was born. Here’s an example of Lovely Caption Maker’s glory:

This Is How We Party

Expressing ourselves on the last day of year twelve in 2006. Very sexy stuff.

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Nicer Footer Navigation with pseudo-selectors
• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• XHTML and HTML5 Compliant Flash – Stop Using Embed and Invalid XHTML/HTML5
• PNGs Have Different Colours in Different Browsers?

Setting Up Apache’s “mod_rewrite” Modul

To implement these URLs with Apache, you will need to have the mod_rewrite module enabled. Here’s how to enable mod_rewrite:

1. Open the httpd.conf file from the …apache/conf/ directory
2. Uncomment the line “LoadModule rewrite_module modules/mod_rewrite.so” (by removing preceding #)

If you have more than one virtual server or directory set up, you might have to add something like this as well:

<Directory "PATHOFDIRECTORY">
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

Next, you need to create a file named “.htaccess” at the website’s root directory (if you haven’t got one already)

In your .htaccess file, add the following rules:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

This will redirect all requests that don’t point to an existing file or directory to ‘index.php’.

You might (or might not) be thinking “How does that help implement clean URLs?” The next part will answer that question, but before proceeding – test your new Apache config and .htaccess file – restart Apache if necessary and try loading a directory that doesn’t exist (ie. http://yourwebsitehost/page/5/your-information/). If it loads your index.php page – we’re ready to continue.

Getting PHP to Interpret The URLs

Ok, the hard part is done. Now I’ll explain what we want when a user requests a page:

1. User requests “/page/5/your-information/”
2. Apache redirects the request to “index.php” without changing the user’s URL
3. index.php breaks up the requet URI and loads page.php instructing it to load page ’5′

This might seem a bit difficult (or, if you’re experienced, very easy) – it honestly is rather easy. Once you understand how it works, you might decide to do it differently, but here is a really simple example of a website that contains information ‘pages’ and information about the ‘authors’ of those pages.

In our example, we have three php files:

• index.php
• page.php
• author.php

“index.php”

<?php
//$urlVariables is an array that contains the different bits of information in the request.
$urlVariables = explode("/",$_SERVER['REQUEST_URI']);
//If the user requested '/page/6/about-elephans/' then $urlVariables[1] would be 'page', $urlVariables[2] would be '6' and so on.

if ($urlVariables[1] == "page") {
//the user is requesting an information page
    include "page.php";
} elseif $urlVariables[2] == "author" {
    //the user is requesting author information
    include "author.php";
} else {
    //load the home page
    include "default.php";
}?>

“page.php”

<?php//load an object that deals with pages (to keep the tutorial simple)
include "classes/page.php";
$page = new page;
//$urlVariables will contain the page id as the 2nd array element (ie. /page/pageid/page-name-here/)$page_id = $urlVariables[2];
//the page name part of the URL is ignored when loading because we only use ID to load pages - it's just good for search engines and people.

//get the page class to load the page
if ($page->load_page($page_id)) {?>

<h1><?php echo $page->page_name(); ?></h1>
<p><?php echo $page->page_content(); ?></p>
<p>Written by <a href="<?php echo $page->author_url(); ?>"> <?php echo $page->author_name(); ?> </a></p><?php

} else {

    //error!
    include "error.php";
}>

“about.php”

<?php

//load an object that deals with authors (again, to keep the tutorial simple)
include "classes/author.php";
$author = new author;
//$urlVariables will contain the page id as the 2nd array element (ie. /author/authorid/author-name-here/)
$author_id = $urlVariables[2];
//again, the author name part of the URL is ignored when loading because we also only use ID to load authors - it is just good for search engines and people.

//get the author class to load the page
if ($author->load_author($author_id)) {?>
<h1><?php echo $author->author_name(); ?></h1>
<h2>Bio</h2><p><?php echo $author->author_information(); ?></p>
<h2>All pages by <?php echo $author->author_name; ?></h2>
<$php echo $author->page_list; 

} else {
    //error!
    include "error.php";
}
?>

Now that example was probably a bit excessive. Here’s a basic overview of how it works:

1. The index.php page is loaded, and ‘explodes’ the request part of the URL into an array ($urlVariables in the example)
2. You then interpret the array elements to decide what to show to the user. ($urlVariables[1] determined whether to show a page or an author profile and $urlVariables[2] was an ID for either the page or the author in our example)

It’s that simple. This method is SUPER flexible if you build a strong framework around it.

Good luck!

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Extract GET Variables from URL String to Array – PHP Function
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Nicer Footer Navigation with pseudo-selectors
• PHP – No such file or directory in Unknown on line 0 Error
• Check if Headers Have Already Been Sent in PHP

In JavaScript terms, I needed to be able to add (or create) and remove (or delete) elements, within another element, the form. After a little bit of research on the internet, I had what I needed to do just that. See a basic example of javascript dynamically adding and removing elements… Here’s how to do it:

To begin with, here’s the commented JavaScript code for adding an element using the DOM in JavaScript

function appendElement(containerId, newElementId, newElementContent) {
	//First, we need to create a new DIV element
	var newElement=document.createElement("div");
	//New we will give it the specified ID so we can manage it later if necessary
	newElement.setAttribute("id", newElementId);
	//Insert the HTML content into the new element
	newElement.innerHTML=newElementContent;

	//Get a reference to the element that will contain the new element
	var container = document.getElementById(containerId);
	//Now we just need to insert our new element into the containing element
	container.appendChild(newElement, container);
}

And here’s the commented JavaScript code for a function to remove elements:

	function removeElement(parentId, elementId) {
	//Get a reference to the element containgint the element we are removing
	var parentElement = document.getElementById(parentId);
	//Get a reference to the element we are removing
	var childElement = document.getElementById(elementId);
	//remove the
	parentElement.removeChild(childElement);
}

And that’s it. Of course, this by itself isn’t going to do much. Though with a little bit of imagination, these functions can help you improve the usability or usefulness of your website.

Related Posts:

• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker
• Extract GET Variables from URL String to Array – PHP Function
• MySpace – Convert Text to HTML

What makes this solution so great is it means that you can easily add new articles, products and pages to your website whenever you want – and without learning anything about web design! It’s just like sending an email, except you’re writing an email for all of your customers and potential customers. The picture further below is a shot of the software used to create this page you are looking at right now.

Here are some of the HUGE benefits:

• You can add and update content whenever you like
• Adding new pages, articles, products is as easy as using Word
• Customers can subscribe by email, and new articles can be sent to customers automatically!
• Get more visitors and customers through search engines
• Keep visitors interested in your site for longer with more for them to read
• Receive feedback on any page
• Make it easy for readers to share your pages with other people

Screenshot of the blog software I used to

post this article in less than 10 mintes…

Try It Out Yourself, Now!

After seeing so much success for my own site by using a blog, I really want to give my customers the same opportunity. So I made a demo blog that you can look at, write demo articles, edit the articles and delete articles…

View the demo blog
Manage the demo blog
Username: demo
Password: demo

The whole “blog” section of the logon2 website and a huge amount of the specific information including the portfolio, areas serviced by logon2, and detailed explanations of some of logon2′s services. Over 60 pages (and constantly growing) of content, all linked and organised, automatically sent to subscribers and bringing over 400 of visitors a week through search engines

Related Posts:

• New Content brings Crowds
• Nicer Footer Navigation with pseudo-selectors
• New Site – Barrabool Rural Protection Group
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• PNGs Have Different Colours in Different Browsers?
• Introducing the Lovely Caption Maker

I personally developed the original WizzComb website in 2004, being only the second website I had ever developed it was pretty abysmal when it came to standards, accessibility and even good markup form. The website became out of date so after some tinkering, the WizzComb website is now fresh, valid, accessible, SE-Friendly and better looking.

Popular Posts:

• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Free Web Proxy List – Access Blocked Sites From Work or School
• Choose MySpace Comment Colors, Fonts and Sizes
• Returning the entire row of maximum value for each group (Group-wise Maximum in SQL / MySQL )
• MySpace – Convert Text to HTML
• Extract GET Variables from URL String to Array – PHP Function

The HTML

After some searching around, the most appealing solution I found was the Suckerfish solution. Using the Suckerfish solution, a dropdown menu can be marked up using semantic HTML – more specifically – lists. Here’s an example:

<ul id="nav">
	<li><a href="#">Menu 1</a>
		<ul>
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>

	<li><a href="#">Menu 2</a>
		<ul>
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 3</a></li>

</ul>

CSS Part 1

As you can see, this is some very clean HTML or XHTML code which is great for search engines, accessibility and validation – not to mention code maintenance. Now, we just need to apply some CSS styles to the elements to turn this list into a dropdown menu or popup menu.

Using the Suckerfish solution, these are the styles to add:

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 10em;
}

CSS Part 2

That CSS gets the root menu’s visual structure up, now we need to organise the actual dropdown menus. We need to hide the drop down lists until the user hovers over the root of that particular drop down list. To do this, it seems the most accessible multi-platform solution is to move it out of sight using “left:-999em” rather than “display:none” which is known to be inaccessible. On the hover event, we move it back beneath the root using “left:auto” because “left:0″ causes a problem in Opera.

Here’s the CSS for showing and hiding the dropdown lists:

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

The Special :hover Case of Internet Explorer

Done, you now have a perfectly functioning, semantic, valid, accessible menu – right? Not quite – this still doesn’t work in Internet Explorer because it doesn’t happen to have full support for the “:hover” pseudo class but that’s Ok. Because those geniuses at HTMLDog created Suckerfish - a very small Javascript script that will solve this problem in no time, add this to your head section:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");

	for (var i=0; i<sfEls.length; i++) {

		sfEls[i].onmouseover=function() {

			this.className+=" sfhover";
		}

		sfEls[i].onmouseout=function() {

			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

What Suckerfish does is goes through all LI elements in #nav and adds the class “sfHover” onMouseOver (when the user hovers over the list item) and removes the class onMouseOut. Or in other words, it solves our problem.

There’s only one thing left to do, and that’s change a bit of the CSS that shows the dropdown menus to include the new “sfHover”:

Change:

#nav li:hover ul {
	left: auto;
}

To:

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

And that’s it! Here’s a working demo of the valid, accessible HTML and CSS drop down menu.

Solution for Overlapping Elements or Hidden Menu

Sometimes, there’s STILL more trouble. When implementing this menu for Lonsdale Views, I came across a problem – the menus were being obstructed or hidden behind other elements! So I went ahead and used z-index to let the browser know that the menu needed to be on top. Huzzah, it works! Oh, not in Internet Explorer – what a surprise. I spent quite some time searching the internet for a solution…

Eventually I read that Internet Explorer passes z-index from parent to child, so even if you give a “4th generation” element a z-index of 1000, the z-index can’t be greater than the lowest z-order of any parent elements!

The solution to your menus being obstructed or hidden behind images, hidden behind pictures, hidden behind text, hidden behind flash, hidden behind everything:

Give each parent element of the #nav element isn’t common with the obstructing element a HIGH z-index (let’s say, 100) and give the element containing the elements obstructing your menu a LOWER z-index (let’s say 0)

For example, if this was part of your page:

<div id="container">
	<div id="topbar">
		<ul id="nav">
			... the menu code is here ...
		</ul>
	</div>

	<div id="content">
		... the element(s) that obstruct or are hiding your menu ...
	</div>
</div>

You could use this CSS to remedy your problems:

 #topbar, #nav {
	z-index:100;
}

#content {
	z-index:0;
}

Hope this has saved you some time and taught you something. If you really appreciate it, leave a comment and even go and say thanks to the crew at HTMLDog - this is all because of them!

Flash Objects Obstructing or Overlapping Menu

Sometimes, even when all of the CSS is correct, your menus might be overlapped by flash objects. For example, when you hover over, your CSS menu is hidden behind a flash object. The solution to this is actually somewhat simple and cross-browser. All that you need to do is add the transparency parameter to your embed / object code, like so:

<object type="application/x-shockwave-flash" width="100" height="100">
	<param name="wmode" value="transparent" />
	<param name="movie" value="flash.swf" />
	<embed wmode="transparent" src="flash.swf" width="100" height="100" />
</object>

Notice how “<param name=”wmode” value=”transparent” /> has been added? Also, don’t forget to add the ‘wmode=”transparent’” to the EMBED tag - that is imporant for non-Internet Explorer browsers. Now obviously, you need to change the “src” attributes and the movie value to whatever the URI of your flash file is.

Happy coding!

Related Posts:

• PNGs Have Different Colours in Different Browsers?
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• Nicer Footer Navigation with pseudo-selectors
• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• Introducing the Lovely Caption Maker
• Removing MovieClip Children from MovieClip in Flash Using ActionScript

The reason that being able to tell Google where most visitors will be coming from is so useful is because it generally improves the position of search results for pages that are more relevant because they are closer. This is just another great step forward in improving the web for users and webmasters alike.

Thank you, Google!

Related Posts:

• Pretty Smarties 0.5 – Pretty URLs, Smarty Templates and Faster Web Design
• New Content brings Crowds
• Making Your Site Stand Out With Favicons
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• XHTML and HTML5 Compliant Flash – Stop Using Embed and Invalid XHTML/HTML5
• Nicer Footer Navigation with pseudo-selectors

Includes

• A domain name.
• Web hosting
• Web design tools

How?

Micosoft Office Live! basic offers all of this for free – there are no downloads involved and absolutely no fees. Here’s how it works:

1. Enter your details
2. Choose a domain
3. Choose a template and make your pages
4. Have your site up and running within 24 hours

Just go to the Office Live! website to get started.

Related Posts:

• Accessible, Valid Dropdown Menu or Popup Menu using CSS and Semantic HTML
• Free Web Proxy List – Access Blocked Sites From Work or School
• Download Music From YouTube Videos – From YouTube to MP3
• Making Your Site Stand Out With Favicons
• Processing PHP Code in CSS files to Improve Productivity and Browser Cross-Compatibility (using Apache)
• XHTML and HTML5 Compliant Flash – Stop Using Embed and Invalid XHTML/HTML5