Fix My Site! Three Common Web Design Errors and Their Quick-and-Dirty Fixes

by | Oct 27, 2009

Warning: Most of these fixes will require a moderate understanding of CSS and/or HTML.

Problem: There are borders around all my image links!

Solution: Well, we can take care of this one of two ways. One, we can write a CSS rule that says “for the love of Pete, quit automatically adding borders around my image links, you stupid browsers!”

Two, we can just go into the images and fix the problem at the source.

So your image links look something like this:

<a href=”http://www.site.com”><img src=”http://www.site.com/images/image2.jpg” /></a>

And your images, thus, look like this:

Website Design Errors - Image Link Border

Here’s the quick-and-dirty fix:

Add the following to your image tag: border=”0″

So, your tag should look like this now:

<a href=”http://www.site.com”><img src=”http://www.site.com/images/image2.jpg” border=”0″ /></a>

That should take care of any unwanted borders that crop up.

Problem: Help! My images aren’t showing up!

Solution: This is a problem that many people run into after they’ve transferred their site from one server to another, or have converted it to a new CMS. You move images around, and suddenly the browser can’t find them. Your first step should be to check the image paths to make sure they’re pointing to the right places.

For example, let’s say that all your images used to be in the main directory. So, your image paths would look like this:

<img src=”http://site.com/image1.jpg” />

Now, let’s say that you’ve moved all your images into an image folder. However, the paths haven’t been fixed to show that. When a browser goes looking in the main “site.com” folder, they won’t find your image anymore, so you get a sad broken image link. So, you need to go back to all your image links and update them so they look like this:

<img src=”http://site.com/images/image1.jpg” />

Ta-da! Your images should show up now.

Another fix is to try a root-relative path instead of an absolute path. Absolute paths are the ones we used above, where you have the full site name in the image path. A root-relative path looks like this:

<img src=”/images/image1.jpg” />

The easiest way to make a root-relative path is to just remove your main URL from the file path.

Root-relative paths are especially helpful if you’re moving a lot of things around, getting a new site name, etc. When browsers see that slashie, they go to the root directory of your server and start looking for the “images” folder from there. That way, if you switch domain names, you don’t have to go through and fix every single one of your images to reflect the title of your new site. With a root-relative path, browsers will already know where to look.

Problem: My site doesn’t have a title in the browser header.

Solution: Then you need to make friends with the title tag! The title tag goes in the header of your website, and according to W3 Schools, it’s required in all HTML and XHTML documents.

This is what you see:

AVC Title Tag - Small

This is what the code looks like:

<head>
<title>Aqua Vita Creative | Website Design and Development to Grow Your Business – Tulsa Web Design, Marketing &amp; e-Commerce Development</title>

</head>

As you can see, the title tag must go between the opening and closing head tags. Just put the title of your site between <title> and </title>, and voila! Your browser header should have a shiny new title in it.

Got any questions, or do you have any quick-and-dirty fixes that you want to share? Leave us a comment below!

Do you have other website design errors that need fixing? Give us a call at 918-518-6576, or click here to shoot us an email.