Melikbilge

So far as my short career as a web developer, I’ve spent several hours trying to figure out what I was doing wrong in my CSS when my page gave me errors, unwanted margins, total screw-up, etc.

Of course, spending so much time debugging, as most programmers do, I have made a list of the mistakes I’ve made that were often so simple that you’d probably smack yourself if you made them (Not too hard). As with many mistakes, they seemed to be a good idea at the time. So jump in, and find some things to learn from.

1. Closing CSS properties with their corresponding curly braces.

This one might sound very simple, but when you’re debugging immediately by code to see changes on your page, sometimes you will forget to close the rule or rules you are working on. It’s happened to me at least twice in a week. Here’s a code without the closing curly brace.

 body {
        text-align: center;
        color: #FFF;
        position: relative;
        left: 2px;

 em {
        background-color: grey;
 }

As you can see, there is no brace closing the body rule. As a result of this mistake, everything below the body rule will be ignored/messed up. I panicked when I first saw this on my page, but that’s what code does to you. On to number 2.

2. (For WordPress Users) Changing the name of your theme through FTP and not going to the Design section to reselect the correct theme.

I experienced this dilemma yesterday when I was instant messaging my co-author friend, Hayes Potter. I changed the name of my theme through FTP and everything seemed fine, until 2 hours later when my homepage would not show any content, not even the title. A blank page.

I decided to investigate and went to the Design section of my Dashboard. Sure enough, another theme was selected for the blog, which did not work correctly with my content. When I reselected my own theme, everything was back to normal. So if your blog goes blank, don’t scream. Just look for logical reasons, and if all fails, contact me.

3. Styling occasionally invisible elements without editing your code to ignore them (like navigation links if you have less than 10 posts on your WordPress blog.)

By far, this mistake was my most frustrating one and took the longest for me to understand and fix.

So I added borders to my “container” div, my “header” div, my “sidebar” div, and my “footer” div. That’s when I realized the “container’s” border was stretching at least 10 pixels below the post content. This was represented by a seemingly blank rectangle the width of the container 10 pixels high, below the posts’ white background. At first, I thought this was a margin error from the post, so I tried many things, but I just ended up losing my original code and no results.

After everything failed, I used some things that I should have used in the first place: Web Developer Toolbar and Firebug for Firefox. After I inspected the blank rectangle, both reported that the navigational links were located there. That explained why the rectangle was so stubborn at disappearing. I decided to quit the border mission, since they didn’t look that good anyway. If you have solutions to ignore some code in the CSS, post it in the comments. It will be very helpful.

4. Trying to write CSS by coping and pasting it from Google without making an attempt to learn it.

This is mentioned in an InformIT article. Again, this has happened to me. Without learning the code and the lingo, I decided to smack-dab everything into my HTML without giving a thought to how it worked. As a web developer, I don’t do this without understanding what the code means anymore, but I was foolish back then. I messed with pseudoclasses without knowing what they meant. Yes, it was that serious.

So my advice to you, when learning any computer language, or in fact, any language, don’t imitate others to get what you want. If you spend a little more time learning and understanding, it will save you time and from the embarrassment when a subscriber complains about your site and you can’t fix it.

5. Falling back on quirks HTML when you can’t figure something out with CSS or XHTML.

Last but certainly not least, using old anti-standards HTML is no way to go. It’s like throwing all your standards-compliant knowledge out the window to use what seems to be an easier way.

But noooo way, it isn’t. Anything you can do with old HTML, you can do with CSS or XHTML. Never assume that it is easier to center things or color things with HTML. CSS is always the best way to go, even though it may seem hard. Search on Google or contact experienced web designers, I’m sure you’ll find a way.

Never, ever, fall back to quirks-mode HTML!

Tools that will make your web developing or blogging career easier:

• Firebug - This extension for Firefox is like night-vision goggles in the dark. It will make your job easier trying to debug your code or to find ideas from other websites. I actually downloaded this last week and it has made my life easier. Click on the title for download and the homepage of the Firebug project can be found here. (Note: The Firefox 2 version is not being updated anymore, another reason to switch to Firefox 3.)
• Web Developer Toolbar - Officially called “Web Developer”, I’ve used this extension for months. Even though some features of Firebug are not in this add-on, I love it anyway and have both this and Firebug installed. One reason of its greatness is the Ctrl+Shift+Y shortcut that you can use to click on an item and a sidebar displays the CSS code for that particular element. The download link is again in the title and its homepage is here. Web Developer is also available for the Flock and the SeaMonkey browsers.
• Programmer’s Notepad 2 - As a program (not an extension), Programmer’s Notepad has been one of the most helpful software I’ve had. It is freeware and works as a replacement for Windows’s built in Notepad. It writes in plain text format, and you can pick the programming language you’re typing in, and the program highlights the syntax, which for me, is its best feature. I’ve written in HTML, CSS, C++, Java, and Javascript with this program, and it offers much more. Here’s a full list of features. Download from the title link.

I hope you’ve learned something from this article and remember to keep these tips in mind.

Filed under: Tips and Tricks, Uncategorized by Melik