xanadu-fx.com

Recently I was working on a table based site, with the entire page surrounded by a 1 px border with round corners. There were numerous table cells, spacer gifs, and four seperate images to use in the corners. Also, it didn’t take much to break it, which put a little space between a corner and a border.
I came across a great way to achieve the same effect using one small gif image and a few lines of style sheet code at the Developers Corner web site. By converting the layout using their “liquid corners” method, I was able to shorten the html files by almost 40 lines of code.
The resulting page layout is fluid (expandable), requires no tables or javascript, works in all browsers with one style sheet and no browser tests, and is very easy to use and customize. Check out my results here: http://www.tshaonline.com/

One way to save a lot of time when designing or debugging web sites is to add the Web Developer Extension to Firefox. It consists of a toolbar and menu with several great features.
With it installed, you can edit style sheets (or HTML) in real time, which saves a lot of FTP and preview time.
Also, you can display just about anything you can imagine such as Id and Class details:

The extension also has an “outline” feature (screen shot) – tables, cells, block level elements and a lot more:

Other features allow the user to hide or outline images, resize the browser to 800×600 or other custom sizes, and use the W3C validation tools with one click:

The Web Developer Extension can be found at chrispederick.com

If you are trying to validate your HTML with Dreamweaver or w3.org, you may have noticed errors stating there is no such attribute as “bordercolor”. Once again, CSS saves the day. The quick solution is to add a style class then insert the tables in a span:
.tbblue table, .tbblue td { border: 1px solid #0000ff; background-color: #000000; color: #00FFFF;}

<span class="tbblue"> <table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>=1=</td><td>=2=</td>
</tr>
<tr>
<td>=3=</td><td>=4=</td>
</tr>
</table></span>

Should result in this 2×2 table:

Another option does not even require the use of CSS; Just give the table a background color and cellspacing a size equal to your desired border, then give the table cells a different background color. If you put the table in a span like I did in the first example, you can avoid having to define the background color (bgcolor=”#000000″) in every table cell. Instead, add something like this to your style sheet: .tbblue td {background-color: #000000;}
Here’s the code for the non-CSS version:

<table bgcolor="#66ccff" border="0" cellpadding="0" cellspacing="1" width="50">
<tr>
<td bgcolor="#000000">=1=</td>
<td bgcolor="#000000">=2=</td>
</tr>
<tr>
<td bgcolor="#000000">=3=</td>
<td bgcolor="#000000">=4=</td>
</tr>
</table>


Suppose you want to add a rollover banner ad on your site and would rather do it with CSS (Style Sheets) instead of javascript. Start by creating an image that is twice as wide as the banner, so that it loads all at once and there is no delay on the mouseover:

Next, add the following lines to the stylesheet:
.rollover a {
display:block;
width: 234px;
height: 60px;
background: url("/ads/banner-free-tiles.gif") 0 0 no-repeat;
float: right;
}
.rollover a:hover {
background-position: -234px 0px;
}
The height and width match the size of the ad. The actual image is twice as wide (468×60). The a:hover pseudo-class moves the image 234 pixels to the left, showing the right half during a mouseover.
Add this code where you want the ad to appear:
<span class="rollover"><a href="http://xanadu-fx.com/tiles/" title="Free Background images"> </a></span>

and you should see this:

You can also use this technique to make rollovers in menus, but I prefer to use text based links in navigation for accessibility reasons. Also, you can stack the images vertically, but be sure to adjust the code in “a:hover” accordingly so the image moves up instead of left.