Best Tools for Troubleshooting Problems with CSS and XHTML

Posted on 20 June 2008 by LizzyFin

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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

Posted on 19 June 2008 by LizzyFin

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

Posted on 17 June 2008 by LizzyFin

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!