Broken Links, Miss-spelled addresses, Unauthorized access, and Server Errors. Turn these errors into opportunities. Capture and keep visitors on your website after an error has occurred by customizing the error reporting page. Provide links, a search box, a back button and a fresh opportunity to explore your site. (more…)

Favicons can be temperamental. There are an endless number of sites offering advice about the favicon. IE seems to be the source of the frustration. Here are a set of steps to adding a favicon to the website:

1. Create the Graphic. Use Photoshop or any graphic-based program to create an image that is 16X16 pixels. Save the file in GIF or PNG format. Save as a transparent image if possible. (Not required.)

2. Convert the graphic file to an icon. If you don’t already have a good tool to create an icon, here’s a free utility: http://tools.dynamicdrive.com/favicon/

3. Name the file: favicon.ico and put this on the webserver with your other html files.

4. Put BOTH of these lines of code into the header portion of your webpage:

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

5. Load this icon from the IE and Firefox address line:
http://www.yoursite.com/favicon.ico

6. Now test your webpage and the favicon should appear in the browser next to your web address. If not, try to add the webpage into the Favorites (IE) and Bookmarks(Firefox).

As the mouse moves between line 1 and 2 the hover state goes away until it rolls back into line 2 of the link.

Firefox keeps the hover state active between lines of a css link.  Its only in Internet Explorer that the rollover flickers.  Here’s what I found:  if you add height: 1% to the definition of the css tag a then the flashing rollovers will go away.

a {
 color: #1b155f;
 text-decoration: underline;
 height: 1%;
}

redefine the UL tag.  In this case I created a whole new id:

#thisul {
 list-style-position: outside;
 list-style-type: disc;
 margin-left: 30px;
}

Make sure the position is outside and there is a left margin defined for the UL.

Reserved HTML characters such as ampersand (&) and greater than(>) can cause problems if they appear as ordinary text in an HTML document. The browser will mistake these reserved characters for markup. Use the php function htmlentities to convert characters such as & to & if this becomes a problem.

Be aware though, some text such as RSS feeds contain HTML markup for formatting purposes. In this case, htmlentities is NOT recommened.

Character encoding can also lead to display problems. To ensure proper display of special characters, pay attention to the character encoding. UTF-8 is the default character encoding for XML. ISO-8859-1 is more commonly used in HMTL. If you use UTF-8 encoding in the HTML document’s head section, the special characters from XML files and RSS will display properly.

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

In Word Press blogs there are no indents and paragraphs by default. Ordinarily when you hit the <Enter> key you get a single line but not a paragraph. When I was trying to test this, I found that if you hit the <Enter> twice you get a paragraph break.

The indentation is a separate issue.  I was reading that most bloggers don’t indent their paragraphs.  But if you want to indent a paragraph you use the style.css and add

text-indent: 20px;

For my template, posts are defined by the CSS class: storycontent so that’s where I would add the text-indent line to my style.css file.

I want to pass the parameter topic on the url like this:

http://www.cycsf.org/eventdetails.php?topic=1

Here’s how it can be done in php:

if (isset($_GET['topic']))
$topic_id = (get_magic_quotes_gpc()) ? $_GET['topic'] : addslashes($_GET['topic']);
else
$topic_id = ””;

When I created a popup menu in Fireworks and Dreamweaver the popup menu in Firefox has an insertion caret. Here’s a way to fix this:

Add a line in the javascript MM_showMenu
document.body.style.cursor = ‘pointer’;

At the end of the function add another line:
document.body.style.cursor = ‘default’;

Here’s a quick way to create a navigation bar in CSS:  use a list.  The list-style: none removes the bullets.  The display: inline tells the list items to be positioned horizontally across the page.  I’ve used this solution when the navigation is simple.

#navlist li
{
list-style: none;
display: inline;
}

The top menu bar of this blog is created using this technique.

I found this slideshow that fades the images during transitions.  The images can be setup with hyperlinks. The code allows for 2 slideshows simultaneously on the same page. 

Here’s a working version of this slideshow:
http://www.cccwinternights.org

Here’s where I found the code:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm