Geek Daily

There are many times when I am writing an application I need to display data in a table. Most of the time a simple HTML table styled with CSS is all that I need but occasionally I want a bit more. Today we’ll look at designing a plugin for jQuery that will add some advanced features such as row selection and sorting.

Design Goals

Starting out we are going to keep this pretty simple and as it progresses we’ll add more features.

For now we are going to start with a hand coded HTML table and CSS. In a later post we’ll look at populating the grid from a data source.

In this post today we’ll apply the CSS to the table but will expand this to a skinning system later on.

We’ll also be applying the row selection feature today.

Starting Point

Let’s use a simple table as out starting point.

<table cellpadding="0" cellspacing="0" class="easygrid">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Bill</td>
        <td>CEO</td>
        <td>53</td>
    </tr>
    <tr>
        <td>Jason</td>
        <td>Developer</td>
        <td>29</td>
    </tr>
    <tr>
        <td>Sue</td>
        <td>Accountant</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>HR Manager</td>
        <td>42</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Graphic Artist</td>
        <td>31</td>
    </tr>
</table>

Basic Style

Next we will apply some basic CSS to make our grid look nice.

body, table {
     font-family: verdana, arial, sans-serif;
}

table.easygrid {
     font-size: 11px;
     width: 600px;
     border-top: 1px solid #b8b8b8;
     border-left: 1px solid #b8b8b8;
}

table.easygrid th {
     text-align: left;
     padding: 5px;
     background: #424242;
     color: white;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td {
     padding: 5px;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td.alt {
     background: #f6f3f6;
}

table.easygrid td.selected {
     background: navy;
     color: white;
     font-weight: bold;
}

Building The Plugin

Here is the basic layout of our plugin. We’ll look at implementing those functions in a minute.

This is pretty simple so far. We have our default values, we merge the user passed options with the defaults, and then call two methods on each jQuery instance.

(function($) {
     $.fn.easygrid = function(options) {
         var defaults = {
             alternateBackground: true,
             allowRowSelect: true
         };

         options = $.extend(defaults, options);

         return this.each(function(index, table) {
             setAlternateBackground($('tr:odd td', table), options.alternateBackground);
             rowSelection(table, options.allowRowSelect, options.alternateBackground);
         });
     };
})(jQuery)

Here is our setAlternateBackground method. Note we are passing all the odd rows found in the current table.

function setAlternateBackground(rows, alt) {
     if(alt == true) {
         rows.attr('class', this.className + ' alt');
     }
}

This function appends the alt CSS class to each row if alternate row backgrounds is enabled.

The next function adds a click handler to each row to implement the row selection functionality.

function rowSelection(table, allowSelect, alt) {
     if(allowSelect == true) {
         $('tr', table).click(function() {
            //reset all rows
            $('tr', table).each(function() {
                $('td', this).each(function(index, cell) {
                    $(cell).attr('class', cell.className.replace(' selected'));
                });
            });

            //restore alt backgrounds
            setAlternateBackground($('tr:odd td', table), alt);

            //select this row
            $('td', this).attr('class', this.className + ' selected');
        });
    }
}

There is a little more involved with this function. If this feature is enabled we are adding a click handler to all the rows in the table.

First the click handler will clear any selected rows and reapply the alternate background colors. I am not sure why this gets lost.

Then, finally, the row that was clicked is selected by applying the selected CSS class to each cell of the row.

What’s Next?

That is it for this post but we will look at adding sorting to our grid in post in the near future.

Currently the row selection is a bit buggy in Firefox but works fine in IE. I will have the Firefox issues sorted out for the next post. You can check out a demo here.

Be sure you don’t miss out by grabbing the RSS feed, updates by email, or following on Twitter.

Yes, the title is a question. I think the answer to that is yes, although I am not sure.I encountered a very strange problem yesterday and it took a while to track down. I found this problem so frustrating that for a moment (only a brief one) I questioned my adoration for ASP.Net.What Was Happening?I’ll explain a little about the problem so you can understand where I am coming from.First off I should mention that this was occuring in an old in-house CMS product that, IMO, should be tagged as legacy code. It spits out bad HTML which is mostly to blame on a rich text editor that is used to design templates and modify text on pages. The pages have a HTML 4.0 Transitional doctype.The problem was that ASP.Net Session variables were not persisting on page refresh. classic . They were set and could be used afterwards in the same request but when I navigated to a different page or refreshed the same page all Session variables were null again.To screw with my head a little bit I tested 3 different browsers. IE7 and Firefox 3 had the problem consistantly but Chrome worked just fine, my Sessions stayed alive from page to page. What the…!The Solution…I ThinkI eventually tracked the problem down after more than 4 hours of going through [legacy] code, line by line. That was painful. The way the CMS works is any template tags that are unused get removed so there isn’t a bunch of useless HTML messing things up. Comcast Deals . Lead Certified . I found however that unused image template tags were still rendering but with an empty source attribute.

<IMG ALT="" SRC="" ONLOAD="constrain()">

Notice the all uppercase…gross. Anyway, I discovered that if the unused images were removed or the src was set to ‘spacer.gif’ then all was well again.The Take AwaySo, I am left amazed that bad HTML code can mess with something like ASP.Net Session variables. How is this possible and why didn’t Chrome/WebKit have a problem? My first reaction would be to blame Internet Explorer but even Firfox choked on this!And is leaving the src attribute empty even considered invalid markup (in HTML 4)?This is by far the weirdest thing I have experienced while using ASP.Net. Has this happened to anyone else? Anyone care to explain how this is possible?

I am always looking for easy ways to use less tables in my markup. When designing a website I always aim for no tables but in a web application I may cheat from time to time.

Some time ago, thanks to an article on quirksmode, I began creating tableless forms. This trick was great for simple forms but I kept using tables for really complicated forms.

For example, if I needed a 2 or 3 column form I would just use a table because figured it was easier. Well, after playing with the orginal code from quirksmode I have found a simple way to create multi column forms with little to no extra effort. It just requires you to think about it ahead of time.

Let’s take a look at a simple example based on the original tableless form.

<!-- ----------
HTML
---------- -->
<form>

	<label for="firstname">First Name:</label>
	<input type="text" name="firstname" id="firstname"/><br/>

	<label for="lastname">Last Name:</label>
	<input type="text" name="lastname" id="lastname"/><br/>

	<label for="emailaddress">Email Address:</label>
	<input type="text" name="emailaddress" id="emailaddress"/><br/>

</form>

/* ----------
CSS
---------- */
label, input {
	display: block;
	float: left;
	width: 150px;
	margin-bottom: 10px;
}
label {
	width: 110px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
br {
	clear: left;
}

That code would produce a form that looked like this:

But what if you want to do something a bit more advanced, say, like this:

We have made the form 2 columns and thrown in a select box and a textarea. Normally I would be preparing to use tables in a situation like this until a stopped and realized how easy it would be to do without tables.

The CSS hardly changes.

/* ----------
CSS
---------- */
label, input, select, textarea {
	display: block;
	float: left;
	width: 150px;
	margin-bottom: 10px;
}
label {
	width: 110px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
textarea {
	height: 50px;
}
br {
	clear: left;
}

All I’ve done is add the select and textarea selectors to the first definition. I also added a specific definition to make the textarea 50 pixels high.

Now the HTML doesn’t change too much either. There is just more of it, obviously.

<!-- ----------
HTML
---------- -->
<form>

	<label for="firstname">First Name:</label>
	<input type="text" name="firstname" id="firstname" tabindex="1"/>

	<label for="address">Address:</label>
	<input type="text" name="address" id="address" tabindex="5"/><br/>

	<label for="lastname">Last Name:</label>
	<input type="text" name="lastname" id="lastname" tabindex="2"/>

	<label for="city">City:</label>
	<input type="text" name="city" id="city" tabindex="6"/><br/>

	<label for="emailaddress">Email Address:</label>
	<input type="text" name="emailaddress" id="emailaddress" tabindex="3"/>

	<label for="province">Province:</label>
	<select name="province" id="province" tabindex="7">
		<option value="0">--Select a Province--</option>
		<option value="AB">Alberta</option>
		<option value="BC">British Columbia</option>
		<option value="MB">Manitoba</option>
		<option value="NB">New Brunswick</option>
		<option value="NL">Newfoundland</option>
		<option value="NS">Nova Scotia</option>
		<option value="ON">Ontario</option>
		<option value="PE">Prince Edward Island</option>
		<option value="PQ">Quebec</option>
		<option value="SK">Saskatchewan</option>
	</select><br/>

	<label for="comments">Comments:</label>
	<textarea name="comments" id="comments" tabindex="4"></textarea>

	<label for="postalcode">Postal Code:</label>
	<input type="text" name="postalcode" id="postalcode" tabindex="8"/><br/>

</form>

What you should notice is that the markup creates the fields from left to right. I have also added a tabindex to each field so that you can tab through them from top to bottom. So, the tabbing would start on the First Name field tab to the bottom on the left hand side fields then move tot he top of the right side fields and tab to the bottom of that column, exactly how it would if I had created the form with tables.

So in the end we have nice clean markup for our more advanced form with hardly any extra CSS and no messy tables. Enjoy!

Here is what I liked this week. Enjoy!

Comparing Popular JavaScript/Ajax Frameworks
After four days of ASP.NET AJAX training with Stephen Walther I set out to learn more about my options in choosing a solution for a JavaScript/Ajax framework. If I realized days later I would be writing this comprehensive post on 7 of the most popular frameworks, I may have just went with the “Inny-Minny-Miney-Moe” method!

jQuery AJAX calls to a WCF REST Service
Since I’ve posted a few jQuery posts recently I’ve gotten a bunch of feedback to have more content on using jQuery in Ajax scenarios and showing some examples on how to use jQuery to cut out ASP.NET Ajax. In this post I’ll show how you can use jQuery to call a WCF REST service without requiring the ASP.NET AJAX ScriptManager and the client scripts that it loads by default. Note although I haven’t tried it recently the same approach should also work with ASMX style services.

SQL SERVER – Better Performance – LEFT JOIN or NOT IN?
First of all answer this question : Which method of T-SQL is better for performance LEFT JOIN or NOT IN when writing query? Answer is : It depends!

Video: Write Your First Silverlight Game
In this video, I demonstrate how to start writing your first Silverlight game. I show how to create a dramatic space scene, add a soundtrack, and associate movement with the mouse wheel. This is the first part of a two-part series.

Reading binary files using Ajax
But when it comes to binary files, helping hands from server-side technologies are often necessary.

So I googled around to see what I can do about binary files with Ajax and found this Marcus Granado’s post at http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html

What he posted there worked like a charm for FireFox and Safari but I couldn’t get it to work for IE.

But luckily, within the same page, someone had posted up a solution for IE as a comment, which is written in VBScript.

Safari CSS Masks
Webkit continues to impress with it’s early implementations of new standards. WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.

Here are some interesting stories from this week.

IE 8 strict mode doesn’t allow for CSS opacity?
So the fact that this has been labeled as by design suggests that IE8 will be the only browser produced in the last 10 or so years that will not support opacity in its strictest mode. Thats rediculous.

Google Will Sell Performics, SEOs Exhale
Exciting news from The Official Google blog today that reveals Google will stop scaring SEOs everywhere and will sell off Performics, the search marketing company that they accidentally acquired when they bought DoubleClick last year. To avoid the conflict of interest that comes when you’re a search engine selling search engine optimization services, Google will split Performics into two companies – an affiliate marketing company and a search marketing company – and then sell the search marketing half.

Webforms is dead. Long live MVC!
Scott Hanselman’s fourth screencast *confirms* that the interfaces and abstractions made as part of the MVC (HttpContextBase, IHttpRequest, IHttpResponse, etc.) will not be put into the existing Webforms model. That means that once MVC is released, the old HttpContext object in WebForms will *not* inherit from HttpContextBase, nor will the WebForms versions of HttpRequest and HttpResponse objects implement the interfaces.

But I’m not moving my mouse!
The IE team reacted correctly: the bug has been solved in IE8b1. When the mouse does not move any more the mousemove event stops firing, as it should.

However, this same bug was recently introduced in Safari (Windows) and Opera!

Safari 3.0 and Opera 9.26 support mousemove correctly, but Safari 3.1 and Opera 9.5b have copied the IE bug.

Netscape Navigator Goes Quietly Into the NightOn New Years Eve, the news went out from AOL that the long life of the Netscape Browser was coming to an end.Though this news will have little or no impact on the vast majority of web developers, those of us for whom Netscape was their first browser will give a wistful sigh of rememberance.Coming Soon: Changes to the CSS Working Group? On December 14th, one of the key members of the CSS Working Group, L. David Baron of the Mozilla Corporation made an announcement:

“Ive informed the CSS working group that I am no longer participating in member-only mailing lists or meetings. I believe the member-confidential nature of the group hurts the future development of CSS by making the group: * fail to accept the contributions of many who would like to contribute to CSS and * get mired in debates and stalling tactics that companies would not be comfortable using in public. “I still intend to participate in any discussions that take place on www-style, public-css-testsuite, and other public forums. “I support rechartering the CSS working group as a public group.”

Although there have been few public follow-ups, representatives of Microsoft and Google expressed their support. realtors . It seems like change within the CSS Working Group is coming, but like everything the Group does, it may not happen quickly.

Cascading Style Sheets (CSS) are used within the HTML behind your Web site as a way of controlling how each page is laid out and what elements on it look like. For instance, you can use CSS to make headings in your copy a standard size across the whole of your site.CSS has been around for several years and is supported by all the major browsers available today, including Internet Explorer for the PC and Mac, Firefox, Safari and Opera.Using CSS to control your Web site will give you several benefits:Makes your Web pages snappierBy using CSS and writing your HTML code to match standards like ‘XHTML Transitional’ or ‘XHTML Strict’ you can decrease the ‘render time’ of your pages. This is the time it takes between downloading the page and actually showing it on screen to your Web site visitor.When using tables for layout – the traditional alternative to using CSS – and ‘font’ tags to control how the text on the page looks, the browsers have a lot more work to do before they show the page. Using CSS and the proper DocType for the pages means the browser knows what to expect from the code and can display it much more quickly.In practice, converting to a standards based CSS layout on one client’s Web site reduced the time it took the page to display by almost a quarter of a second. Although this is a very small amount of time, it is more than enough to make a Web site feel much more snappy and responsive, helping it give a good impression to your potential customers.Makes your Web site quicker to updateAs well as making your pages display quicker, CSS makes it easier to make global updates to your Web site. Say you’re having a minor change in corporate image and want all your page headings changed from blue to green. carpet stores . With CSS controlling how your headings look, that means changing the colour in one file and the whole site shows the change – a two minute job rather than having to edit every page on the site.This flexibility gives you the opportunity to do more with your Web site. Want to show your support for Red Nose Day? Again, one file change can put a little red nose next to all of your headers, turn the text red and even make them display in a silly typeface. Turning them back to normal for the next day is, once again, a single file change.Good for Search Engine OptimisationBecause using CSS removes lots of HTML from your pages as layout and the look of text is controlled through the CSS file, it makes your textual content much more prominent within your HTML. wrongful death attorney . This means the search engine spiders can easily find your textual content, and that your content is generally displayed in one block, rather than being split up into less readable chunks by HTML just to fit it in to your design.Using ‘semantically correct XHTML’ – ie heading tags around the headings and sub-headings in your copy, and bold or strong tags around content you wish to highlight – tells the search engines those words are the most important on the page. This helps give the page a boost for searches which match the words which are marked as more important in this way.Helps in passing the Disability Discrimination ActUsing good CSS and XHTML makes it easy for people with disabilities to change your pages the way they may need to for easy reading. This may be through increasing or decreasing the font size, or having it read to them through a screen reader. The clean page coding that goes along with using CSS means screen readers can easily navigate through your page and find the content, giving a good experience to visually impaired users.Using CSS and XHTML also helps you comply with the UK Disability Discrimination Act rules for accessible Web sites. This is a valuable side-effect of using this kind of coding and takes no extra development time to be compliant.Helps browsing from different devicesAs well as helping screen readers, using CSS means alternative devices like mobile phones and PDAs can show your content effectively and easily. Although the current market in the West for browsing the Web through mobiles is small, it is growing and by using CSS you can create a Web site which is easily viewable on these devices with little extra effort,. So as more people use them it will be simple to convert your site to work with current or future devices..DownsidesCurrently, Web browsers treat CSS slightly differently, so when your Web site is created you may need slightly more cross-browser testing, and you will need to find a Web designer who understands how to build a site in CSS correctly. Most professional designers and developers are now seeing the benefits of creating standards based CSS sites, but it is worth ensuring that anyone you hire to make your Web site does know CSS before starting a project.But the downsides are small when compared to the immediate and ongoing benefits of a CSS-based Web site.Author Info:Paul Silver and David Rosam are Head of Technical SEO and Head of SEO Copywriting at Web Positioning Centre (http://webpositioningcentre.co.uk). Paul has been involved with the Web commercially since 1996 and David has been writing marketing copy for 20 years, and writing for the Web for a decade.

Phil Haack has suggested a great alternative to the captcha. Personally I hate captchas because they are annoying and hard to read a lot of the time. Phil’s idea would block spam just effectively and doesn’t involve an action by the user in fact the user doesn’t even know it is there (the way it should be).

The Invisible Captcha control plays upon the fact that most comment spam bots dont evaluate javascript. car accident lawyer . However theres another particular behavioral trait that bots have that can be exploited due to the bots inability to support another browser facility.You see, comment spam bots love form fields. enforcement of ip . When they encounter a form field, they go into a berserker frenzy (+2 to strength, +2 hp per level, etc…) trying to fill out each and every field. Its like watching someone toss meat to piranhas.At the same time, spam bots tend to ignore CSS. For example, if you use CSS to hide a form field (especially via CSS in a separate file), they have a really hard time knowing that the field is not supposed to be visible.

The following example is a hack to combine CSS and JavaScript into a single file thus reducing page load speeds. This technique is based on the way current browsers react in certain situations and should be used cautiously.

Now, if you have by any chance worked on page load optimizations, you would know how costly each resource download is. The more the number of external resources that you refer to, the more the time it takes for the page load to complete. Typically, web pages refer to many external CSS and JS files and hence incur many resource downloads. The advice from the PLT (page load time) gurus is to combine all the CSS files into one and all the JS files into one so as to reduce the number of resource downloads to just two. kay . This, without any doubt, would help boost your PLT.If you feel that two downloads still isn’t the best, I concur. scommesse sportive online . In this post, we’ll look at a technique to combine CSS with JS and get the resource download count to one! I discovered this technique while desperately trying to improve the page load time for the pages in Microsoft Office Live. Read on…The technique relies on how CSS and JS parser behaves in IE and Firefox. * When the CSS parser encounters a HTML comment token (<!–) in CSS content, the token gets ignored. * When the JS parser encounters a HTML comment token (<!–) in JS content, the token is treated similar to the line comment (//) and hence the rest of the line following the HTML comment token gets ignoredLook at the below JS+CSS code snippet…<!– /*function t(){}<!– */<!– body { background-color: Aqua; }When the CSS parser parses the above content, the HTML comment tokens would be dropped and the snippet would become equivalent to the one below…/*function t(){}*/body { background-color: Aqua; }As you can see above, the CSS parser will get to see only the CSS code and the script code would appear to be within the comments (/* … */). In similar lines, when the JS parser parses the content, the HTML comment tokens would be treated as line comments (//) and hence the code snippet would become equivalent to the one below…// /*function t(){}// */// body { background-color: Aqua; }As you can see above, the JS parser will get to see only the script code and the rest of the contents would look like comments.You can refer to the above content in both the SCRIPT and LINK tags in your HTML page. For e.g.,<link type=”text/css” rel=”stylesheet” href=”test.jscss” /><script type=”text/javascript” language=”javascript” src=”test.jscss”></script>Note above that both the tags refer to the same source and hence it would be downloaded once and used as appropriate (as CSS and SCRIPT).To round it off, there is just one more thing that you need to take care of – the response content type – it needs to be set to */* in order to affirm to Firefox that the contents can be treated as anything as appropriate.

raleigh home improvement . I found a nice article explaining how to ensure that the newest version of your javascript or css is always loaded and not using old cached versions. send flowers gifts . The example shows how to accomplish this in ASP.Net but this technique can easily be applied to any server side code.

<script type=”text/JavaScript ” src=”FileName.js?v=<%=AssemblyVersionNumber()%>”>The attribute does nothing other than trick the browser into thinking that the .js file must be retrieved from server for new version instead of cached .

Shaun Inman has demonstrated in a great article how to customize file inputs. car spa . Thought to be impossible to style, Shaun proves that with a little imagination anything is possible.

We start with a simple replacement. The custom button image is set as the background-image of our wrapper element and dimensions are set to match. atlanta seo firm . Next we set the opacity of the file input itself to zero, effectively making it invisible but still clickable (something that cant be achieved with display: none; or visibility: hidden;). Finally, the JavaScript keeps the button portion of the the file input underneath the pointer whenever the mouse enters the wrapper element. A class of SI-FILES-STYLIZED (also configurable) is applied to the html element of the page for use as a styling context for compatible browsers.

Ajaxian.com has posted and article regarding frustrations with CSS and the slow rate of adoption by browser vendors. Some comments question the W3C’s effectiveness and the future of the Open Web.

have all been frustrated with CSS over the years. The implementation has been spotty across the browsers, and it has all but died off. IE 7 stepped up and fixed a lot, even if some werent happy with how far they got. CSS 3 has been out there for quite some time, but apart from Opera, other browsers have selectively implemented their pet features. Some have done interesting non-standard work too: -mypetfeature-foo-bar.

It sounds like CSS 3 as The Big Unit is basically dead, and small modules are the way forward. car service nyc . banner stands . We should see good support for CSS 3 selectors, media queries, and who knows what else. dental supply company . Hopefully that new layout manager!

Tableless layouts have generated some heated debates around whether or not they are worth the effort. Many argue why suffer when tables do a good enough job? Well, I talked about standards and semantics in a previous article so I’ll leave that for you to read later. Putting semantic correctness aside, SEO plays a big part in why I made the switch a few years ago. I want to squeeze every last drop of advantage out of my markup as I can. It is not easy getting a top ranking so why make it harder but refusing to optimize your code?Alright, enough of that, in reality tableless design really isn’t that hard once you have some practice and identify possible cross-browser issues that may arise like clearing floated divs and width differences. So let’s lay down some structure. columbia college . You can find the complete source for this article at the end. I am going to only focus on the pieces that apply to tableless design and assume you know the basics of layout a page.Figure 1

<div id="content"><div id="left"><!-- use a container to avoid using padding and border on #left which causes cross-browser inconsistencies with width --><div class="left-container">LEFT</div></div><!-- end #left --><div id="right"><!-- use a container to avoid using padding and border on #right which causes cross-browser inconsistencies with width --><div class="right-container">RIGHT</div></div><!-- end #right --><div class="clear"/></div><!-- end #content -->

This is the section we will have to float 2 divs side by side to create our 2 column layout. Wyoming Hot Shot Trucking . Before continuing I will explain some pieces of this code. I have used and extra container inside each column of this layout so that I can apply and padding or borders directly to the text and not to the column itself. The reason for this is Firefox, Opera, and other standards compliant browsers add margin and padding to the overall width of the div which will break our float because the 2 columsn width’s will equal greater than the width of the layout wrapper. Internet Explorer doesn’t add margins, etc to the overall width but subtracts them from it.You’ll notice the div with class=”clear”, this will call the CSS class that will clear our floats. Again Internet Explorer 6 doesn’t require this because of it’s box model bug but other standards browers do need it. Using a break (br) tag is a common practice instead of a div tag but I discovered that Internet Explorer 7 seems to ignore a clearing break but works fine with a clearing div. I am not sure if it is only in select situations but I feel it is best to just avoid trouble altogether.Now let’s look at our CSSFigure 2

#wrapper{width: 790px;margin: 0 auto;}#left{width: 590px;background: #dedede;float: left;height: 500px;}.left-container{margin: 20px;margin-bottom: 0;/* IE6 pushes footer down without this */}#right{width: 200px;background: #b8b8b8;float: left;height: 500px;}.right-container{margin: 20px;margin-bottom: 0;/* IE6 pushes footer down without this */}.clear{clear: left;}

Notice the class clear, this clears the floats in our div, pretty simple. see how I add the margins to the left and right containers so we avoid any width problems. the width for #left and #right add up to the width of #wrapper (this contains the while layout) and #left and #right are floated left. I have set the background of each section to a different color so they will be easy to spot.That’s pretty much it. That wasn’t too painful was it? Copy the source code below and make an HTML page and take a look at the finsihed product. A valid, hack free, 2 column, tableless layout. I didn’t even need a conditional comment.Article Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Tableless layout</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><style type="text/css">body{margin: 0;font-family: Verdana, Arial, sans-serif;}#wrapper{width: 790px;margin: 0 auto;}#header{padding: 25px;background: #eeeeee;}#content{}#left{width: 590px;background: #dedede;float: left;height: 500px;}.left-container{margin: 20px;margin-bottom: 0;/* IE6 pushes footer down without this */}#right{width: 200px;background: #b8b8b8;float: left;height: 500px;}.right-container{margin: 20px;margin-bottom: 0;/* IE6 pushes footer down without this */}#footer{padding: 10px;background: #eeeeee;}.clear{clear: left;}</style></head><body><div id="wrapper"><div id="header">HEADER</div><!-- end #header --><div id="content"><div id="left"><!-- use a container to avoid using padding and border on #left which causes cross-browser inconsistencies with width --><div class="left-container">LEFT</div></div><!-- end #left --><div id="right"><!-- use a container to avoid using padding and border on #right which causes cross-browser inconsistencies with width --><div class="right-container">RIGHT</div></div><!-- end #right --><div class="clear"/></div><!-- end #content --><div id="footer">FOOTER</div><!-- end #footer --></div><!-- end #wrapper --></body></html>

Ever need to find unused CSS styles? This is for you!

If youve ever worked on a large project especially where several people are all working on the same stylesheets youll know how quickly it can get out-of-hand. georgia southern university . Styles are added over time, then forgotten about, and coming back on a stylesheet months (or in this case, years) later can be a scary experience. How much of that is necessary? You dont always know, but you fear deleting anything, in case something, somewhere is using it.I needed a tool that could work this out for me something I could run in the background during development that would build up a profile of which rules are not being used anywhere. party bus . And since there wasnt anything out there to do this job (at least, nothing that I or any of my colleagues could find), I wrote my own initially as a Greasemonkey script, and finally as a full-blown Firefox extension.And here it is enjoy!

The Internet has matured alot since it’s inception. It has under gone many changes and today we are seeing some amzing things done with various Internet technologies. One of the key factor in this vast amount of rich and interactive data is Web Standards. auto auction . Web standards have allowed us to transmit and share data in reliable and predictable ways. Semantics is a component of Standards, although not as important as a defined structure for the data, that describes the data it contains. Semantics, in many ways, is about common sense. It makes sense to expect a paragraph tag (<p>) to contain a paragraphic of text. It would also make sense to expect a table to contain a grid or table of data. So why are tables used for layouts?That in and of it’s self is a very interesting question. While the we have made great advances there are still some areas that are a little slow in catching on, for whatever reason. One area is XHTML. While the XHTML specifiaction has been out for years there are still many developers using HTML 4. I was even talking to a fellow developer the other day and a company he is working with still has the bulk of their web work in HTML 3.2, the horror!Perhaps it is the fact that Internet Explorer still doesn’t correctly support the XHTML mime type (XML application) that developers have asked, “Why bother?” Or perhaps some just don’t see the benefit in making the switch. kroger.com . Now to be clear I am not saying we have to go back and convert evry website or application we have ever written but at least any new development should be in XHTML.Why bother? Well, for me anyways, one big reason is Google. The search engine giant is favoring semantic and clean markup in it’s page indexing. So a little extra effort when writing your markup can have big payoffs down the road.So back to the question of why tables for layouts. Well there are many arguments like tabled layouts take longer to load and are less favorable to search engines, which are probably true. Ultimately every developer must choose for themselves. Believe me if I could cram tableless layouts and semantics down everyones throats I would. I am tired of working on projects that someother person has banaided together with horrible markup and then trying to repair the damage (or at least just figure out what is going on). Whether it is that you’re comfotatble with tables or you think that it is easier just bite the bullet, switch to semantic markup and use tables for what they were made for, tabular data. used car . You’ll be glad you did, maybe not today, maybe not tomorrow, maybe not while your cursing my very existence as you piece together your first layout then look at it in IE6, but someday you will thank me!Cheers.