Images and Text are Misaligned
Note: If you are using Visual Site Designer and are having this problem between Firefox and Internet Explorer, you should upgrade to the latest version of the software. As of version 5.74 (and later), Visual Site Designer handles most of this for you. Even still, the information below remains valid.
Misalignment is a fairly common issue in Web design. It's something Web designers have always had to deal with, especially since every Web browser will render the same page differently. There are techniques that designers have come up with that minimize the misalignment of objects and text on their pages. Here are a few of them:
Go to Settings > Standard Settings for New Pages and click Change DOCTYPE. In the window that appears, switch your DOCTYPE from <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> to <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.
Make sure you know the dimensions of your page before you begin. Knowing where and how you can work within your own boundaries can help a great deal.
Use only Web-safe fonts. These are fonts that are installed on almost every computer, so they are sure to display properly for all users. You can view a list of Web-safe fonts here:
Mac and Windows Web-Safe Fonts
Give your elements plenty of room. This doesn't mean hundreds of pixels in between each object, but it's good to give at least a few pixels of padding to your objects.
Find or build a good design that most current browsers will display similarly. A good initial design is the best way to make sure you avoid page mix-ups.
Frequently test and preview your work. When building or designing a Website, it's good to test practically every change you make in several different Web browsers so you don't end up with a finished product that needs lot of work to align properly.
These are only the basics. There is a whole lot — a whole lot — to Web design. Any designer can benefit from doing any amount of research, but sometimes it's difficult to know where to start. Here are a few links that can help you learn some good design techniques:
Web Page Design for Designers
HTML Goodies
W3 Schools
Web Design from Scratch Web 2.0 Design Style Guide
Some of these resources talk about coding, but if you use Visual Site Designer, you can still learn some good design techniques from them.
Rate This Article
You must be logged in to rate articles.
