A good text editor is the heart of the hand-coding toolbox. You could use notepad or whatever plain text editor is bundled with your operating system, but there’s really no reason to settle. There are plenty of free alternatives with features to make hand-coding faster and easier.

Windows – Notepad++
Hands-down the best editor for Windows. With syntax highlighting, auto tag completion, code folding, and much more, Notepad++ is a lightweight program with everything you need to code XHTML and CSS. Make sure you grab the TextFX plugin (built into newer versions) and the Explorer plugin (a nice file browser) from the plugin repository. While you’re there, check out the 60 or so other plugins available for even more flexibility and features.

Mac OS X – Textwrangler
Textwrangler is one of the best free text editors for Mac OS X. However, if you’re willing to shell out a little money, I’d recommend either TextMate ($60) or Coda ($99) for more robust features and support. They all have their pros and cons, so give each a try to see what works best for you.

Browser

If a text editor is the heart of the hand-coding toolbox, then a browser is the soul. It’s the reason developers build tableless websites. And for web design and development, there’s no better browser than Firefox. Not only does it adhere to accepted web standards, there’s a ridiculous number of add-ons available to streamline the hand-coding process. Just remember to limit the number of extensions you have enabled so the browser stays quick and stable.

Here’s a list of my favorite add-ons:

• Firebug – I couldn’t live without Firebug. You can tweak CSS properties right in the browser and see the results live, inspect XHTML elements to sort out layout problems, monitor network requests, and more. This is a must-have add-on for Firefox.

• Web Developer Extension – Another add-on with indispensable features. View the generated source code from pages with javascript, disable and enable style sheets and javascript, analyze XHTML elements, validate local and remote markup and CSS, and much more. Plus, it includes some nice features from stand-alone plugins like MeasureIt (a ruler to measure elements in the browser window) and Window Resizer (resize the browser window to test different screen resolutions).

• Live HTTP Headers – It shows the HTTP header calls made with each page load in real time, which can help you sort out issues with caching and redirects.

• Yahoo! YSlow – This is actually an extension to Firebug that works with its network monitoring features. YSlow tests the performance of your web pages and offers suggestions to tweak the underlying code and server settings. Shoot for an ‘A’ grade to push your web development skills to the next level.

• Pixel Perfect – This is also an extension to Firebug. It lets you overlay a copy of your mockup in the browser window, which can save a lot of time flipping between Photoshop and Firefox.

• GridFox – This creates a grid overlay in the browser window. Combine it with Firebug and you can nudge elements into perfect alignment.

• FireFTP – I prefer a stand-alone FTP program, but this comes in handy on occasion. It has all the features you need to upload files, including directory comparison and the ability to transfer through SFTP (extremely important for security).

I know Internet Explorer is the browser everyone loves to hate, but it is used by the majority of people outside of the tech and design communities. Plus, there’s a little-known Internet Explorer developer toolbar that mimics the functionality of the developer toolbar for Firefox. Just food for thought.

Cross-browser compatibility

A website may look great in Firefox, but that doesn’t mean the layout is ready to be released into the wild. Cross-browser compatibility testing is critical and ensures visitors have a consistent experience regardless of the browser they use.

IETester provides Windows users with easy access to Internet Explorer 6, 7, and 8 in one place. It suffers from random crashes, but that’s a small price to pay for the convenience of three browsers in one. (I’ve found that you can avoid a lot of glitches if you open an IE8 tab first.)

If you’re on a Mac, you can to try the spoon plugin, which lets you run your websites through different browsers in an online “sandbox”. There’s also the Adobe BrowserLab. It’s free now, but expect Abode to charge for it in the near future.

In addition to those tools, you can always download the full versions of other browsers. Sometimes there’s just no substitute for the real thing. I have these installed in a separate folder and check finished websites in each one before I wrap up.

• Firefox (Windows, Mac)
• Safari (Windows, Mac)
• Opera (Windows)
• Chrome (Windows)

FTP

FTP, or File Transfer Protocol, is how you upload your shiny new, hand-coded web pages to the internet. FileZilla is one of the best stand-alone FTP clients and it’s available for both Windows and Mac OS X. If you’re using Notepad++ there’s an easy way to integrate Notepad++ and FileZilla so you can edit files directly on the remote server.

Remember to always transfer files through SFTP where possible. Otherwise you send your username and password over the network in plain text.

Local server

If you plan to do more than deliver static HTML pages, you’ll need a local server. A WAMP or MAMP stack (short for Windows or Mac + Apache-MySQL-PHP) allows you to run server-side languages and even database driven packages like WordPress from your desktop. I install Apache, PHP, and MySQL from scratch on my Windows boxes, and there are plenty of online tutorials to walk you through the process. But if you’d prefer a simpler solution…

Windows – XAMPP
XAMPP will have you up and running in a few minutes with everything you could need from a local server.

Mac OS X – Built-in or MAMP
Mac OS X has a built-in Apache server and there are lots of online tutorials that explain how to access it. Or you can go with MAMP, which is a one-click solution that installs Apache, PHP, and MySQL.

Five Finger Coding

To create a group of options, wrap them in an optgroup element. To give the group a label, use the label attribute. Here is a simple example:

1
2
3
4
5
6
7
8
9
10
11
12

<label for="phones">Select a phone:</label>
<select name="phones" id="phones">
	<option value="" selected>None</option>
	<optgroup label="Apple">
		<option value="iphone">iPhone</option>
	</optgroup>
	<optgroup label="Nokia">
		<option value="n91">N91</option>
		<option value="e60">E60</option>
		<option value="6300">6300</option>
	</optgroup>
</select>

And here is how the browser you are currently using will render the above example:

Select a phone:
None

iPhone

N91 E60 6300

One caveat is that assistive technology support for the optgroup element and the label attribute is inconsistent, as noted in Creating Accessible Forms at WebAIM and the WCAG 2 technique H85: Using OPTGROUP to group OPTION elements inside a SELECT.

To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites below:

Browsershots	Browsershots
Spoon	CrossBrowserTesting
NetRenderer	Litmus
BrowserCam

For all examples I will use same Xhtml code.

1
2
3
4
5
6
7
8
9
10
11
12

< !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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
	<div id="wrapper">
	</div>
</body>
</html>

All changes I am doing in the style.css in #wrapper{ … }

Let’s define standard styles for wrapper block of our small website. I am adding borders and background. It helps to see website position.

1
2
3
4
5
6

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
}

Center Middle Align (Center Horizontal)

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11
12

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
}

So, in my example width=400px, so for margin-left I calculated value as this 400/2=200. The same do for margin-top – 300/2=150.

You can download example here

Center Bottom Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-200px;
}

The main idea is same, but I am using bottom=0 to move #wrapper block to the bottom of the browser.

You can download example here

Center Top Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:0 auto;
}

If you want, you can add top margin for #wrapper. For example, I add 20px:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:20px auto 0 auto;
}

You can download example here

Left Middle Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
}

The main thing is to correct calculate of margin-top.

You can download example here

Right Middle Align

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
	right:0;
}

The code the same as above, but I add right:0 to move #wrapper to right part of browser.

You can download example here

In Conclusion, I think you can create code for Right-Top, Right-Bottom, Left-Top and Left-Bottom easily using my code above.

Thanks for the reading.

This is a simple example of Creating Cross Browser Compatible CSS Text Shadows. We will not use Images, only clear CSS code which work for all browsers.

Let’s create xhtml code:

1
2
3
4

<p>
   <span class="shadow">Cross Browser Compatible CSS Text Shadows</span>
   <span class="text">Cross Browser Compatible CSS Text Shadows</span>
</p>

I do not know if it is good for SEO, but for this method you need to duplicate content where you want add shadows. I think it is good for SEO, because you will not do shadows for ALL content of your website.

Next step: add this CSS code:

1
2
3
4
5
6
7
8
9
10

.text{
	position:relative;
	z-index:10;
}
.shadow{
	color: #cccccc;
	position:absolute;
	z-index:5;
	margin:2px 0 0 2px;
}

I think this is a very simple way to use shadows.

You can download an example here.

Each browser uses its methods, so we need to create styles for each browser. Let’s start with default xhtml code which we will use for our example.

1
2
3
4
5
6
7
8
9
10
11
12
13

< !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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
	<!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]-->
</head>
 
<body>
	<p class="shadow">Cross Browser Compatible CSS Text Shadows</p>
</body>
</html>

All versions of Internet Explorer

I have added special code which will load stylesheet file only for Internet Explorer, like this:

1

<!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]-->

So, enter to ie.css next CSS style:

1
2
3
4

.shadow {
	height:20px;
	filter: Shadow(Color=#cccccc, Direction=120, Strength=4);
}

Filter is supported only by Internet Explorer. Also for Internet Explorer 8 will add next code too.

1
2
3
4
5

.shadow:before {
  margin: 0;
  padding: 0;
  content: '';
}

Firefox , Chrome, Safari, Opera and SeaMonkey

1
2
3
4
5
6
7
8
9
10

.shadow{
	white-space:nowrap;
}
.shadow:before {
	display: block;
	margin: 0 0 -25px 3px;
	padding: 0;
	color: #cccccc;
	content: 'Cross Browser Compatible CSS Text Shadows';
}

white-space:nowrap; – this is a hack I am using to fix a small bug in Opera and Safari.

By the way, the next code you can use only for Safari and Opera:

1
2
3

.shadow {
	text-shadow: #cccccc 2px 2px 2px;
}

This is a method rendering more beauty and real shadows.

Lol, last code is very simple. Why don’t all browsers use it? Maybe next generation of Firefox and Internet Explorer will use it too.

You can download an example here.

P.S. Read here about a very easy way how to add shadows for all Browsers using only one xhtml/css code.

IETester

In my opinion, each xhtml coder needs software for testing web-pages for various Internet Explorer versions . If you use standard methods and install all IEs, then one cannot guarantee the quality of work of the web-pages.

Here is the tester I have found for myself: IE Tester

IETester is a free Web Browser that allows you to have the rendering and JavaScript engines of IE8, IE7, IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

But this soft has small bugs.

Known problems and limitations :

• The Previous/Next buttons are not working properly
• Focus is not working properly
• Java applets are not working
• Flash is not working on IE6 instance in user mode : A solution is to launch IETester as admin user and Flash will work.
• CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
• PNG transparent do not work correctly.

PS: those who are interested in this information, please contact me, as I have got a portable version IE7 and IE8, which work with any Windows without installation and even using it from your flash.

I have solved this problem and suggest you the next code example.

At first let’s get ready all background images for our menu. We need 6 images:

Our next step, we will create CSS styles and Xhtml code:

1. This is a simple example of xhtml code. I added additional SPAN tags for left-side and right-side background images. I used class names menu_left and menu_right

1
2
3
4
5

<ul id="menu">
	<li><a href="#"><span class="menu_left"><span class="menu_right">Home</span></span></a></li>
	<li><a href="#"><span class="menu_left"><span class="menu_right">About</span></span></a></li>
	<li><a href="#"><span class="menu_left"><span class="menu_right">Ask Question</span></span></a></li>
</ul>

2. Onward we describe BODY tag and add all images for rollover effect as a background, because rollover image effect will appear faster and users will not see the blink.

1
2
3
4
5
6
7
8
9
10

body{
	/* srat Preloader for menu hovers */
	background:url(bgr_menu_a_hover.gif) no-repeat;
	background:url(bgr_menu_left_hover.gif) no-repeat;
	background:url(bgr_menu_right_hover.gif) no-repeat;
	/* end Preloader for menu hovers */
	background:#fff;
	padding:20px;
	margin:0;
}

3. At the end create all classes and IDs for our menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#menu{
	padding:0;
	margin:0;
	list-style:none;
	width:100%;
	overflow:hidden;
}
#menu li{
	float:left;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	padding:0 2px 0 2px; /* indent between menu items */
}
#menu li a{
	float:left;
	display:block;
	color:#fff;
	background:url(bgr_menu_a.gif) repeat-x;
	text-decoration:none;
}
#menu li a .menu_left{
	float:left;
	display:block;
	background:url(bgr_menu_left.gif) no-repeat;
}
#menu li a .menu_right{
	float:left;
	display:block;
	cursor:pointer; /* for IE6 */
	text-align:center;
	padding:6px 15px 0 15px;
	height:21px;
	background:url(bgr_menu_right.gif) no-repeat right top;
}
#menu li a:hover{
	background:url(bgr_menu_a_hover.gif) repeat-x;
}
#menu li a:hover .menu_left{
	background:url(bgr_menu_left_hover.gif) no-repeat;
}
#menu li a:hover .menu_right{
	background:url(bgr_menu_right_hover.gif) no-repeat right top;
}

That’s all!

By the way, the height of my images is 27px. Check this part and be sure that your height and top padding are correct.

1
2
3
4
5
6

#menu li a .menu_right{
	...
	padding:6px 15px 0 15px;
	height:21px;
	...
}

Let’s do some math. Top padding equals 6px and height equals 21px accordingly 21 + 6 = 27 – is the height of image.

You could download an example here.

Let’s start with logo or image replacement of the text. This method is very useful for your website SEO and your users will not notice any changes. Search engines will read your logo as Real text, not as Image.

I usually add logo real text to H1 tag and named it as id=”logo” like this:

1

<h1 id="logo"><a href="index.html">Your website name</a></h1>

Now add CSS styles to this tag:

1
2
3
4
5
6
7
8
9
10
11
12

#logo {
	padding:0;
	margin:0;
}
#logo a{
	width:100px;
	height:50px;
	display:block;
	text-indent:-9999px;
	outline:none;
	background:url(logo.png) no-repeat;
}

I use outline:none; style to fix small Firefox issue which appears when you click to link up with image or background. Also text-indent is needed for removing text from user viewing. You can manage padding and margin styles as you need.

If you need to fix PNG transparent effect for Internet Explorer 6, please, read this post.

You could download an example here.

But for some reasons, sometimes this script does not work correctly on my server . I really don’t understand why.

So, I use next solution to solve the problem.

Let’s look at the next example.

Save this code to your style-ie.css file:

1
2
3
4
5
6
7
8

#logo{
	behavior:expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
	this.src = "blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
	);
}

Important! You need to create transparent image and save it as blank.gif to same folder where style-ie.css. is saved. You can make blank.gif 1px to 1px.

This code will work for IMG tag and for CSS background style.

But if you use background and repeat method, you need to create a new style for repeated backgrounds.

For example:

1
2
3
4
5
6
7
8

#header{
	behavior:expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
	this.src = "blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
	);
}

The code is the same as above for #logo, I changed only this part

1

sizingMethod='crop'

to

1

sizingMethod='scale'

And the last important thing – #header must to have width value in CSS file.

For example:

1
2
3

#header{
	width:100px;
}

Or

1
2
3

#header{
	width:100%;
}

You could download an example here.

By the way, please,  read this post to know how to use PNG transparently without Javascript in IE6

Thanks.