When your CSS breaks

From time to time, I will inadvertently alter my code in such a way that the CSS will break when viewed through the web browser. It's usually an easy fix, but requires that you sort through your code and figure out what went wrong. Often times, you may have forgotten to close a <div> tag, or you may have messed up somewhere with using a comment tag. <!-- ... -->

BTW: If you confine yourself to using only one web browser, you may not notice that anything is broken since some web browsers (uhgum... IE) may not follow the W3C web standards quite as closely as others (Firefox). It's a good idea to regularly check your website with multiple browsers, such as Firefox, IE, Opera, and Safari (and if you're a Linux user, also test using Konqueror).

Here is an example of what happens when the CSS breaks. I just noticed that when I log into the Agent Resources page on the colorado4h.org website that, once authenticated, all of my CSS containers broke apart (see screenshot image below).

(click image to enlarge)

The breakage did not seem to occur in IE 7, but did occur in Firefox 3.0.5. In the screenshot image (above), notice the red circle where I have highlighted the "-->" that appears on the page. This is the tag to end an html comment, and we should not be able to see that tag. This is a good indicator that there is something wrong with one of my comments in the code.

Using a handy Add-On for Firefox called Firebug (you can use F-12 to toggle on/off Firebug), I looked in the source code to find where the --> was being displayed. Since this is a .aspx file, what you see is based on data that the server has processed and has then outputted to your web browser; the resulting html source code has been generated by the server on the fly and may be somewhat different than the source code found in the original file. Although you don't have to use Firebug to view the source code in your web browser (you could easily select View > Page Source from your tools menu), what makes Firebug such a helpful tool is that you can alter the source code and the new changes will be displayed in real time within your web browser (for temporary viewing only; these changes are not actually saved to the file on the web server... this is mostly used for testing purposes).

Click on the image to enlarge, and notice that within the red circle, I can see the following code:

</div>-- & g t ; (note: I had to put spaces between each character in order for Blogger to not actually place a '>' character in this location)

So, what does this mean? Hopefully you understand what the ending div tag is. In html, to display a greater-than character (>) on your web page, you would use "& g t ;" (minus the spaces!) to create the > character. The "gt" stands for greater-than, and conversely, you could create a less-than (<) character using "& l t ;" (minus the spaces!). So, why is this important to me? Since I can see the "-->" being displayed on my web page, I can tell that my ending comment tag is somehow broken. Because "--& g t ;" is being displayed in the source code through my web browser (through Firebug), I can tell that the server is creating this charcter set on its own since I know that "--& g t ;" is not contained within the html code of the actual file. Hmmm, perhaps I might be using a "--" somewhere in my code which is throwing things off when the server is processing the data? Sure enough, look at the orange circle in the screenshot image. You will see the following:

National Afterschool Association -->

If I go back to the actual file and view it in my web authoring tool (Dreamweaver), I can see that the actual code for this segment is different from what the server decided to output, and it read as follows:

National Afterschool Association -- March 12-14, Fort Lauderdale, FL

The "--" between "Association" and "March" is throwing the server off when it processes the source code. This is what is making things break. So, a good standard of practice is to never use two hyphens in a row (--) within the body of your text because it may interfere with the next closing comment tag found in your source code.

As many of you are gearing up to use our new Extension Web Template, you may see issues in your CSS from time to time, and it's important to know how to troubleshoot your problem. The point that I am trying to get across with this article is, if your CSS breaks, look for anything on the page (as it is being displayed in your web browser) that may not normally appear, such as html code that is being displayed on the page. This may often times be a good place to start looking in your source code and is likely to be where you will find your error.