29 Jun 10 Horizontal CSS Menu with Persistent Top Hover State

It’s hard to describe, but one thing lacking in most horizontal CSS menus is a persistent hover state for the top level element.

Let me explain – say you hover over the tab “About Us”, and it is supposed to drop down to show other items in that section. When you move the mouse down to hover over these items, personally, I feel the hover state of About Us should stay on to indicate that you’re in that section.

Unfortunately, almost all CSS menus don’t do this. I found one that does, however – Here it is:

http://www.venturelab.co.uk/devblog/2010/06/creating-a-pure-css-dropdown-menu/

The key bit of code is excerpted here:

#nav li:hover a{ /* Set styles for top level when dropdown is hovered */
background:#6b0c36; /* Solid colour fall-back */
background:rgba(107,12,54,0.75); /* It’ll look nice semi-transparent */
text-decoration:underline;
}
This gets tricky, but it should make sense.
This block of code here is where the hover styles come in, there’s a bit of nifty code in there which controls what we’ll call ‘persisting hover states’ on the top level item even when the user is hovering the dropdown items…

#nav li:hover a is what allows you to give the top level link a persisting hover state when hovering its ‘children’. This works by styling every link inside a list-item when that list-item is hovered.

12 Apr 10 Periodontist Directory Canada Release

Just last week, Periodontist Directory.com was updated to include Canada. Periodontists are dental specialists with advanced training in the diagnosis and treatment of Gum Disease and other gum problems. Many of them also provide dental implants to replace missing teeth.

The directory allows you to find a periodontist using either your zip code or your area code.

Canada
Alberta British Columbia Manitoba New Brunswick	Newfoundland And Labrador Northwest Territories Nova Scotia Nunavut	Ontario Prince Edward Island Quebec Saskatchewan

16 Mar 10 IE 7 clear:both not working

IE7 apparently has a bug where clear:both doesn’t work correctly. It would work periodically if I refreshed the page, but that doesn’t give any consistency. Took awhile to find the solution, but here it is:

Set the parent element to have height:100%. It should work now. For clarity sake, here’s some sample code:
<div style="height:100%">
<div style="float:left;width:100px;">left stuff</div>
<div style="float:right;width:100px;">right stuff</div>
<div style="clear:both;">Clear</div>
</div>

Tags: CSS

13 Mar 10 Provide Alternative Content for Flash Files on iPhone and Flash Disabled Browsers

Problem: How to downgrade your site gracefully for non-flash browsers such as the iPhone. The iphone is nice enough to show you a icon in place of the flash content so you’re aware that something is not displaying correctly on the page. However, this can get in the way of a good design.

Solution:
You can’t use Dreamweaver’s built in javascript to drag and drop the SWF on to the page, unfortunately. You have to use a different javascript class file from Adobe, SWFObject 2.

Here’s the help page from Adobe going over how to use it;
Alternative Content for SWF

In case that page is ever taken down, here is the link to the zip file with the examples of how to use the object.
alternative_content_examples.zip

15 Feb 10 Horizontal CSS Menu Essential

What makes a horizontal UL CSS Menu horizontal?

This one line:

li {
display:inline;
}

That’s it. The rest is just decoration and making it look right.

Tags: CSS

29 Jan 10 Safari CSS Background Not Displaying

Weird error today I thought worth posting the solution to.

If your style sheet has this line at the top Safari won’t display certain background colors.

@charset “utf-8″;

When you create an HTML file in Dreamweaver and add CSS directly to the HTML file, it will automatically insert this into the style section. If you then copy the entire style section and create an external stylesheet, it will then remove all of your background colors. Luckily, it’s an easy fix. Just remove the charset. It’s not needed for CSS unless you’re using a foriegn language that has non-ascii characters (in the code, not the text).

Tags: CSS

24 Jan 10 IE6 CSS Hover Margin Fix in UL

I found a weird thing today. IE6 will remove the top margin of a hover link when it’s in a list if it has hover attributes. It’s too hard to explain without the code, so here is the code to re-create the phenomenon. This will make a list that when you hover over the links they jump up as the top margin is removed.


<p>&lt;style&gt;<br />
ul li a {<br />
display: block;<br />
width: 155px;<br />
margin-bottom: 3px; <br />
}<br />
ul li a:hover {<br />
color: #FFFFFF;<br />
background-color: #FC7C00;<br />
} </p>
<p>&lt;/style&gt;<br />
&lt;body&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;test&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;test&lt;/a&gt; &lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/body&gt;</p>


The only fix I could find is simply to add a space before the closing a tag like so:

&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;test &lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;test &lt;/a&gt; &lt;/li&gt;<br />
&lt;/ul&gt;

If you know of a better way to fix it, or if you know why it does this, please let me know!

12 Jan 10 Moving a Gallery2 Installation from one host to another.

I had been extremely unhappy with my host, MediaTemple.net. Unfortunately, I had a client who was using a Gallery2 installation that had been installed on the server ages ago and I couldn’t figure out how to successfully move it.

There were steps that I used that finally solved it:

My new host is JustHost.com by the way. It appears to be very fast, cheap and reliable so far. And best of all they cpanel which makes it so much easier to administer.

0. Of course, back up everything before you delete or change anything.

1. Zip up the Gallery folder. Mine was g2data followed by a bunch of random letters. You should be able to find your gallery folder in config.php. The line looks something like this:

$gallery->setConfig(’data.gallery.base’, ‘/home/user/public_html/yoursite.com/g2data-idfdsakd/’);

2. Backup your mysql database.

3. Create a new blank database on the new host.

4. Change the name of the mysql database in your backup file and restore it to the new blank database.

5. Upload all of the files for a fresh install. I do this by uploading the zip file of the install files and then unzipping it on the server. Much faster that way.

6. Upload your gallery folder (g2data-…)

7. Chmod your gallery folder and everything underneath it to 777.

8. Run the installer. It will ask you were your gallery folder is and your MySQL database. Oh, and one other file that’s needed is the versions.dat file. This must be there or it will think it’s a broken install. The path to this on my install was g2data-…/versions.dat

Don’t do a clean install when it asks you.

9. Upload any custom files that you might have created. This includes template files now.

At this point you should be done. I wasn’t. All of my thumbnails were broken. I finally found a solution from a forum post that said:

Go to Site Admin > Plugins
Uninstall Dcraw, Exif, Ffmpeg, Getid3, jpegtran, NetPBM, GD

Then I deleted the cache’s and rebuilt the thumbnails. Now the thumbnails show up.

To rebuild the thumbnails, go to Site Admin -> Maintenance and select rebuild thumbnails.

I don’t know if it would have worked without disabling the plugins. It may be that because of the transfer, I needed to rebuild the thumbnails anyway. It seems likely, but did the trick for me and now I’m up and running after too many hours of wasted time. Almost not worth the money and annoyance saved from staying with MediaTemple.

Tags: gallery2, hosting

10 Dec 09 Wordpress Blog Banned by Google?

If you’re blog is not showing up at all in Google or other search engines, it may not be because you’ve been a bad boy and you’re blog is banned. More likely, it is because there is a little known setting in WordPress that can hide your blog from all search engines.

To access this setting, go to Settings > Privacy.

Here’s a great link that goes over this in more detail:

http://themeaningofweb.com/beware-of-the-wordpress-noindex/

Tags: SEO

03 Nov 09 Yahoo Maps Driving Directions for Webmasters

Easy as it seems, it escaped me for almost 30 minutes. Embedding a driving directions form on a website is generally quite simple. You just need to imitate the form that Google or Yahoo uses themselves to get the data.

Yahoo is actually quite simple. All you have to do is post the form to http://maps.yahoo.com/# with these two form fields: q1 and q2. I generally have q2 be a hidden field that has the destination address.