Best Tools for Troubleshooting Problems with CSS and XHTML

Different browsers have their own ways of helping developers troubleshoot problems with positioning divs and combating errors that pop up here and there.

I have found a few tools that are extremely valuable for developing web pages. I’m sure these are very popular due to their ability of helping isolate and fix problems.

I prefer Firefox browser so these are my favorite browser add-ons and their features that I really like:

  • Firebug – view divs onscreen, explore code and its output onscreen
  • Web Developer Toolbar – one-click validation, resize screen to 800×600, disable cache, lots more – an army of tools
  • Total Validator – validates complete with screenshots in various browsers
  • ColorZilla – color picker, great view of css divs, zooms page

Care to add to my list? What do you use to help in your WordPress and web page design?

Unformatted Page Due to Corrupted Stylesheet

Yesterday, I ran into a problem that was really confusing, to say the least. I still don’t know exactly how it happened, but the problem was that one of my WordPress blogs lost all its style. That is to say that the pages appeared in black and white and in one long column down the page. No color. No sidebar. No header. Freak me out!

The content of the blog was untouched and it was apparently functioning as intended.

The stylesheet was resident in the theme folder and verified to contain css when I checked it using html-kit or another FTP program. I could download the stylesheet and see that everything appeared to be in there, including the commented-header required for a WordPress theme. If fact, WordPress did not report the theme as being broken – I guess it saw the file named style.css and figured the theme was kosher.

However, when viewed with any browser the unstyled output was seen. Also, validators sent to the blog could not find a stylesheet. What the ??

The really weird part of this story is that I downloaded the stylesheet and could use it on my local machine using the same version of WordPress and the stylesheet produced the desired design. Beyond that, I downloaded the entire theme, zipped it up and sent it to another WordPress fan to check out. He could see the design in all its glory on his development machine.

So, we figured it must be some server configuration that was interfering somehow. Totally vague, I know. At least the problem seemed to be isolated to the online server. I had already tried to upload a number of older versions of the stylesheet, but the style did not come back.

What I did notice, which lead me to a solution, was that in one of those validation reports another error was produced in that the favicon.ico file was reported missing. I verified that file was also resident in the theme and ok. That made two files that the validator could not find even though I could see they were indeed there.

Since the theme apparently worked fine on other systems I took the version that I had downloaded and renamed it. Then I uploaded said “new” theme to the themes directory and deleted the old theme. Exclaims of joy were now coming out of my office – it worked!

I don’t know how the stylesheet came to be corrupted, or if it even was, seeing the same problem with the favicon. The solution was to use a backup. It’s crazy that the backup in this case was the same theme that contained the corrupted file but the moral of the story is that performing backups are definitely worth the time it takes. If the files were corrupted I had backups ready to upload.

Backing up is so easy these days, especially with automated services like Mozy, it’s kinda dumb not to assure yourself that you can recover from gremlins that visit every now and then. Mozy gives you a free 2GB so get started on protecting your files today!

Importing Links into a New WordPress Blog from Another Blog

While changing over from a “practice blog” to the real deal for a client, I came to realize there was no easy way to export the existing blogroll from the old blog. A link import function is available from Write/Link on the WordPress main menu, but no link export exists.

Import Links found under Write/Link menu.

Well, without an export of the existing links you’re left with a lot of copy-n-paste to-do. Copy the name and URL and specify the category for each blogroll link. That’s ok for a couple links, but more than a few links could take a while.

The solution I found to get around this manual labor was to use this great little script that creates an OPML file of all your old blogroll links. Thanks, Kasia! Read her blog post about the solution and give it a try.

Just make sure to point your browser to “…links2opml.php” for importing the link list. Made short work for me!

How To Upload an Existing Blog to WordPress, version 2.5

Perhaps you have to change hosting companies or have a practice blog that you need to upload to a client’s live blog. In that case you need to do two things…first, get a copy of your existing blog, and second, upload that copy to your new blog space.

Using phpmyadmin and exporting a .sql file is not the way to go. Just let WordPress take care of things. You’ll have to export the existing blog to a file and then import that file into the new blog.

On WordPress versions 2.3.3 and 2.5 the Import/Export functions are located under Manage on the main menu.

Exporting an old blog saves an XML file to your computer.

Exporting an existing WordPress blog creates an XML file that you download to your computer. WordPress calls this an eXtended RSS or WXR file, which will contain the posts, comments, custom fields and categories of your old blog. Basically, all your previous blog input should be in the WXR file.

One feature is available on the Export screen and that is to restrict the export file to a single author. Might come in handy if an author really gets into blogging and wants to break off into their own blog.

Choose an author or leave the spin box on “All” and then click on the Download Export File button. Save the file to your computer. It will have a name similar to wordpress.year-month-day.xml and probably be stored in a temporary folder, so keep a copy elsewhere in case you can’t import it right away. When I exported and saved the .xml file, Internet Explorer opened up to show me the file contents. I didn’t expect that, but the comments at the top of the XML file indicated just how to import it into a new blog.

Here are the import steps given by WordPress 2.3.3 in the XML file comments:

  1. Log into that blog as an administrator.
  2. Go to Manage: Import in the blog’s admin panels.
  3. Choose “WordPress” from the list.
  4. Upload this file using the form provided on that page.
  5. You will first be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
  6. WordPress will then import each of the posts, comments, and categories contained in this file into your blog

When you go to the Manage/Import page in WordPress (both versions 2.3.3 and 2.5) you’ll see several blogging platforms listed. That means that you can actually import an XML file from all these places:

Blogger, Blogware, Bunny’s Technorati Tags, Categories to Tags Converter, DotClear, GreyMatter, Jerome’s Keywords, LiveJournal, Movable Type and TypePad, RSS, Simple Tagging, Textpattern, Ultimate Tag Warrior, and of course, WordPress.

Click on WordPress, or whatever system you are importing from, then browse to the XML file on your computer that you previously exported from the old blog and click on the Upload file and import button.

Import the exported XML file into the new blog.

On the Assign Author page you’ll be given a chance to either create a username for each of the authors from the old blog or map their content from the old blog to an existing user on the new blog. Submit the authors and you’re done!

Well, almost done…you still have a couple things on your to-do list, like arranging widgets for your blog theme and importing links from the old blog.