I rework the Saluda Labs CSS and html markup. The old version was using styles generated by Web Assist Eric Meyer’s CSS Sculptor plug in for Dreamweaver. The layout work great in Firefox however the IE7 was slow at loading the dynamic pages with that old style sheet.

This time I used a template style sheet that comes with Dreamweaver CS3. I made a couple of changes to the CSS to get the look I wanted, and then I implemented a CSS image replacement practice in the header div where I replace the h1 tag with an image.

h1.companyname{

background-image: url(images/header.jpg);

background-repeat: no-repeat;

height: 100px;

width: 2960px;

margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: -2000px;

background-position: right top;

}

This CSS code places a background image in the H1 tag, and moves the copy off screen using margin-left -2000px and width 2960px. I selected 2960px width due to the fact the background image width is 960px. 2000 + 960 = 2960. The background image is position to the right of the div.

This technique is great for accessibility and search engine optimization (SEO).