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.

10 Steps To Extension 2.0

Today's post is an extension of my previous post about Slideshare.

I'm embedding Beth Kantor's Slideshare presentation, 10 Steps To Extension 2.0, for a couple of reasons. First is the content itself. While the accompanying narration isn't with the embed, the slideshow is well designed and visually interesting enough to get the main ideas across without the narration. Those ideas are about how Extension can use the emerging tools in what is commonly called "Web 2.0" to more effectively engage their communities.

I also want to embed the slideshow to demonstrate how easy it is to use resources like Youtube and Slideshare, and encourage you to share your own resources with these kinds of services, and to borrow from these services for your own blogs, websites, and presentations. This presentation was found in the "Cooperative Extension" community of Slideshare.

10 Steps to Extension 2.0

View more presentations or upload your own. (tags: nptech web2.0)

Slideshare

Slideshare (http://www.slideshare.net/) has been called the "Youtube of PowerPoint" because it allows you to post PowerPoint presentations to the web that can be viewed by anyone who has a web browser; they do not need to own PowerPoint, or any other software. All they need to do is visit the Slideshare URL where the presentation resides.

Slideshows can be uploaded that contain narration, video and timings. They can, if you choose, be downloaded by the viewer in either PowerPoint (.ppt) or Adobe Acrobat (.pdf) formats. They can be embedded into a blog or a website with a cut-and-paste of a simple line of code.

To upload a video, register at the site with an email address and a password. Then upload your presentation in any of a variety of formats, from PowerPoint and Open Office to Adobe Acrobat. The resultant slideshow can be made public, or kept private and shared only among a group of invitees.

It's an excellent resource for Extension, to post presentations, or to archive them after a workshop or conference. Extension already has a sizable presence at the site (go to the "Community" tab at the top of the page, and search for "Extension").

Many thanks to eXtension for the 30 minute session yesterday, where much of this information was culled.

Audacity

Audacity is a free, open source sound recorder and editor. It has easy, intuitive VCR-like controls for Record, Play, Fast forward and Rewind, and can export a sound file as a .wav or an .mp3 (use the File menu to choose what format you want). All you need is a microphone; plug it in to your computer's sound card, click the play button, and start recording. I used it to record my children singing Christmas songs a couple of years back and had it downloaded, installed and running in minutes.


To edit a sound file, all you do is select the section you'd like to cut by clicking and dragging inside the timeline, and hitting Delete. To combine recordings, use the Edit menu to cut and paste tracks together.

Visit the Audacity site for more information on on using Audacity.

Download Audacity here.

Filezilla

This has been around for a long time, and in wide use, but it's such a handy tool it's worth mentioning in this forum. Filezilla is a free, open source FTP tool. FTP stands for File Transfer Protocol, which basically means the set of rules used to transfer files from one computer to another. Versions are available for Windows, Linux and Mac.

You can download Filezilla here.

With Filezilla, you can take files from, and upload files to, a web server. If you are building a web site, you put in your Host (e.g. yuma.colostate.edu), Username (e.g. cwis392) and Password in the top Quickconnect bar (circled in blue in the screen shot below). You can usually leave the Port blank.

Click the screenshot to see a larger version of it.

Local files are on the left, and remote files on the web server are on the right. To upload, you navigate to the files you want to transfer by using the directory tree on the left. Select the files you want to transfer (use Ctrl to select multiple files), then right-click and choose Upload. To download files from the web server, navigate to the files you want to transfer in the right pane, and once you have the files selected, right-click and choose download.

Hint: to move up a level in the directory tree, click on the folder icon with the two dots after it, circled in red in the screenshot below.


If you are going to connect to the same server multiple times, you should use the Site Manager to save your login information. Go to the File menu and choose Site Manager. Click New Site (circled in green below) and put in your Host, Username and Password information on the right. Then, when you wish to connect, pull up the Site Manager and click Connect.

Large File Sharing

Many of you have probably encountered the situation of trying to send a file via email that is too large to send. You try compressing it, using a .zip program, and still can't get under the file size limit. You end up having to burn the files onto a CD and send the CD via snail mail. Which kind of defeats the purpose of email.

There are several free on-line resources where you can upload large files and designate specific email addresses to download them. Here are four of them (I personally use Send This File most frequently).

http://www.yousendit.com/ (free, 100 mb limit per upload, 1 gb per month limit)‏

http://www.sendthisfile.com (free, no file size limit, 3 downloads max, 3 days for recipient to pick it up)

http://www.driveway.com (free, 500 mb limit per upload)‏

http://www.sendspace.com (free, 300 mb limit per upload)

They all work pretty much the same way. You register at the site with your email and a password, upload the file, and give the email address of the recipient. The recipient receives email notification of the file and a link to retrieve it. The recipient clicks the link and downloads the file. That's it! It's very easy for all involved, and the files are Encrypted and secure.

Did i mention that it's free? All these sites offer paid premium services that allow faster uploads, larger file limits, email lists, etc, but the free service will usually do just fine.

Collabedit

Collabedit (http://collabedit.com/) is a free, real-time, browser-based collaborative source code editor. What does that mean? It means that two or more users can work on the same source code document in real time, on-line, and any changes made to the document will appear in real time as they type. Collabedit will automatically color code the syntax of your document. Codes supported include C++, basic, visual basic, css, html, javascript, plain text, and many others. There is no limit to the number of users, and no login is required.

To begin, you simply click the “Create a New document” button and Collabedit assigns a URL to you. You then send the URL to whoever you wish to collaborate with, and begin building your code. When you are finished simply click the "download" button to download your work.

Did I mention it's free?

Here is a screenshot of a css document being coded by two users:

Welcome!

Welcome to the Technology Toolbox! This blog is maintained by the members of the Colorado State University Technology Unit, and will be used as a forum for a casual discussion of various tools and techniques available to Extension employees. There will be an emphasis on free, cheap and open source tools. Feel free to comment on tools discussed on these posts, and to suggest others.