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.

04 Sep 09 Javascript and CSS Drop Downs over Flash?

I long thought it impossible to have a drop down fall over a flash movie as you would often want in a header of a website.

However, I just saw a website where they accomplished this. After investigating, I found a JQuery library that allows you to do this.

It involves a new way of embedding flash into pages. With just a div tag and a few lines of javascript you can easily embed flash AND have the opportunity to display drop downs over them.

Here’s the link showing it in action:
http://flowplayer.org/tools/demos/flashembed/wmode.html

If you know of any other ways, please pipe up and let us know.

Here’s another link for a great CSS drop down menu:
http://htmldog.com/articles/suckerfish/dropdowns/

Update
It turns out that it’s not the awesomeness of jquery tools that allows you to do this. It’s simply a parameter wmode=transparent that allows it. Jquery tools does look really cool, however.

Another good link for CSS menus is http://purecssmenu.com/ It is an online CSS menu generator.

Tags: CSS, flash, Javascript, jquery

07 Aug 09 Installing Printers in OS9

This may not help a ton of people, but it vexes me about once a year whenever I have to reinstall a printer for someone at my company that has to use OS9 Classic mode.

These steps are for installing a HP Laserjet 1320, but I imagine it would be a similar step for other HP printers.

Sorry for not taking screen shots, or explaining more thoroughly. I’m no longer at the computer I was working this on, so it’s from memory here.

1. Run the install program. Make sure that it installs the printer drivers for OS9. It normally does this by default. For the 1320, this is the program located here.

2. Now comes the tricky part. You need to use Desktop Printer Utility to install it, NOT the Chooser. Search for “Desktop Printer Utility” in the search bar. You’ll most likely find several items matching that description. In my case, I found 7 different files all with the same name. You want the one that is 600kb. It will most likely have a more recent date than the others. The other version is about 1000kb. Double click on it. (if you have the wrong version, it just won’t open up.)

3. It opens up with a create printer dialog. Select USB if you’re installing a USB printer.

4. Select the PPD file to use. Click Change to the right of the first box and find the one that matches your printer. The install program from step 1 should have installed this.

5. Make sure your printer is plugged in and turned on. In the next box (USB Printer Selection), click change and select the printer (it should show up if it’s plugged in).

6. Click OK. You’ll be prompted to name the printer. I named mine HP Laserjet 1320, but it’s whatever you want to use to identify the printer in the future.

You’re done! Hopefully it worked and you can now print from OS9. I make no guarantees that this will work for you situation, I’ve been angered many times by this situation and this is just the latest way I’ve figured out how to fix it.

Best of luck!

Tags: mac, os9, printer