| ASP |
| CGI |
| FrontPage |
| HTML |
| Java |
| JavaScript |
Visit the Mortgage Loan Place for Home Loans and also click here to find VA Loans on our site. 
|
WYSIWYG? Browser/Resolution Compatibility Issues
When I read the Microsoft FrontPage Newsgroup (microsoft.public.frontpage.client), I see a lot of questions concerning things like the following: "When I designed my page in FrontPage Editor, it looked fine. But when I browse it in my browser, it looks completely different." Is "what you see" "what you get?" The answer is yes. And no. It all depends. Let me explain:
The Internet is a gigantic peer-to-peer network, composed of all kinds of machines, and all kinds of software. You've got Macs, PCs, and a variety of other machine types. There are different operating systems. There's UNIX, Windows 3.1, Windows 95, NT, OS2, and a whole host of others. There are different browsers. The big 3 (I bet you thought there were only 2 big ones,eh?) are Netscape Navigator, Internet Explorer, and the AOL browser (previous to AOL 3.0, which uses Internet Explorer). And there are a variety of versions of each of these. Finally, there are different screen resolutions: 640X480, 800X600,1024X768. So, you can see that, depending mostly upon the browser and the screen resolution, your web page may look quite a bit different on one machine than it may look on another. Is all lost? Not entirely. There are some things which you can do to make it look more or less the same under any circumstances. I want to cover some of the most common issues today.
Tables
Tables can be your best friend, or your worst enemy, but they are an important tool in designing your web pages, as I covered in my last article. Here are some of the things you can do to control your tables.
| Here is a table with no settings as to the size of the columns, or the table.. | As you can see, it will basically adjust itself to the size of your screen. | This can be useful in some situations, but unless you're sure that there is about the same amount of data in each column, the sizes of the columns may not be the same. In other words, you have less control over the appearance of your tables. |
| This table has columns for which I've specified the size. Note that all 3 columns are the same size, even though there is a different amount of text in each column. | Also note that the table is always the size of the browser window. How did I do this? | I set the overall table width property to 100%, and each of the cells is set to a width of 33% of the table. You can set the table to any percentage of the browser's window size, and it will size itself accordingly. |
Spacer.gif |
This table uses a "trick" to maintain the size of the left-hand column at a fixed width of pixels, while the right-hand column expands to fit the size of the page. There is a transparent GIF file in the left-hand column. It is 1 pixel high and 162 pixels wide. This column has been set to 100% of the table's size, and the left-hand column has not been set at all. Since the table is set to 100% as well, the end result is that the left-hand column will always be a fixed width, and the right-hand column will always reach to the end of the page. (Note: This "page" is actually contained in a table in another page, so it doesn't look like it reaches to the end of the page, but if it were in a page by itself, it would) |
Conclusion: Depending on your needs, use the table and cell width properties to maintain a consistent look to your layout.
Personally, I find blinking text irritating. But a lot of people use it for one reason or another. If you're viewing this page in Netscape, the text above is blinking. If you're viewing it in Internet Explorer 3x and below, it isn't. Why? Internet Explorer 3x and below doesn't support blinking text! Simple, eh?
Fonts
Depending on your browser, and what fonts you
have installed on your system, you may see the word
"fonts" above in the Broad Avenue Font, or most
probably Arial. I deliberately picked an uncommon font for this
purpose. Different browsers support different fonts, and some
systems have a very limited selection of fonts, even if the
browser supports them. There are things being done to eliminate
this problem, such as creating downloadable, self-installing
fonts, which are stored on the web page, but, again, this may not
be supported by the user's browser. The best idea is to stick
with the 2 fonts which are supported by all
browsers: Times New Roman, and Arial. If you need a special font
for any purpose, you can always use an image file, such as:
This being an image, it will always look the same.
If you're viewing this page in Internet Explorer, the title of this section is scrolling across the page. If you're viewing in Netscape, it is not. This particular type of scrolling marquee, which is available as an insert in FrontPage Editor, wil either work or it won't, depending upon the browser. You will notice, however, that at least the text does appear, and in the proper font and size. So, keep this in mind when using a scrolling marquee. If you want the marquee to scroll in any browser, use a Java applet. Note, however, that not all browsers are Java enabled. So, if you're going to use applets, make sure to include an alternate text for browsers that don't support Java!
Scripting
Here's a real can of worms for you! first of all, if you're going to use scripting in your pages, and you probably will at some point, always use Javascript. Why? Because Netscape doesn't support VBScript! Secondly, different browsers support different object models for Javascript, so it's important to know what browsers support which syntax. For example, Internet Explorer doesn't support the images array. So, if you want to use a snippet of script which changes an image when the mouse moves over it, don't expect it to work in Internet Explorer. The best thing to do when using scripting is to test your pages in both browsers before releasing them to the unsuspecting public.
Screen Resolution
Here's another can of worms. The wonderful world of technology has now given us 3 different screen resolutions to choose from, and all 3 are being used in varying degrees everywhere. Remember that if you're going to use tables, use percentages. Remember that if you use images, they will vary in size, depending on the resolution. And remember that your text will expand to fit the screen. At higher resolutions, a paragraph like this may only occupy 3 lines.
If your machine is capable of displaying different screen resolutions, you might want to download a handy dandy tool from the Microsoft Windows website. It's called Quickres.exe. When you run the program, it adds an icon to your taskbar. Click on the icon, and you can switch from one resolution to another in an instant.
Testing Your Webs
A final note: It is a good idea to test your webs in at least Netscape and Internet Explorer, to see how they look in both browsers. FrontPage is very accomodating when it comes to this. If you select File|Preview In Browser... from the menu, FrontPage will give you every browser installed in your registry to choose from. Don't be lazy! Check out your pages in as many as you've got. And if you really want to get detail-oriented, try them out in different resolutions as well.
Eventually, you will become familiar with these issues, and you may not have to do as much checking. There are a few other issues as well, but these are the major ones which you will encounter. It's up to you to decide how much you care about the look, feel, and functionality of your webs. Good luck!
Author: Kevin
Spencer
Date: 10/31/97
More
articles about Microsoft FrontPage
More
articles by Kevin Spencer
Author
Biography
