Ahh, the browser wars, or so they're called. Thanks to immaturity on the parts of Netscape and Microsoft (David and Goliath) there are some striking differences in the way the two major browsers handle the HTML and other code they are given. So, this page is dedicated to trying to point out and explain some of those bastard children of this browser fued.

*Related Slacker Link*: Browser Resource Center: Free Downloads of Different Browsers, Add-ons, and Information.

Here's the rundown:

So, you think your web page will look AOK on both browsers, huh? Well, you might be wrong. If you use columns, floating frames, a marquee or blinking text then you might have a problem. Actually, you might have a problem if you use other tags, too, but let's take a look at those tags I just mentioned and how they affect the two top borwsers.


Marquee Vs. Blink
(they're both annoying if you ask me)

Marquee. Blink. when I first saw these two tags I thought to myself: 'Is this a joke?' I thought of what could happen if a tool like this was unleashed into the hands of the irresponsible, the evil.
And, in the true spirit of comradery, Netscape and Microsoft decided to each make there own tags. AND, if that were not enough, the opposing browsers don't even recognize each others tags. Lot of good that does for us.
So, you want words to blink? Do you use Internet Explorer by Microsoft? If so, you can make words blink, but you may never see them blink on your own monitor (lucky bastard).
So, you want a marquee (if you even know what one is)? Do you use Netscape Navigator or Communicator or any Netscape browser? If so, you can make words marquee, but you cannot witness them do it (count your blessings).

Now, let's get down to what these tags actually are.

If these words are blinking, then you have Netscape and your browser accepts this command.

If these words are scrolling across your screen, then you have Internet Explorer and your browser accepts the marquee command.

Well, that's how you find out if your browser accepts those commands, if you didn't believe me in the first place. Now you know. Wanna know how to make those tags now? We'll do the blink command first, since I like Netscape better.

<blink>this text will blink</blink>

OK. So the blink tag is simple. That's true. But the marquee tag, while being simple in it's simplest form, is intricate in it's most intricate form. Well put, huh? Lookie:

<marquee>this is the text that will 'marquee'</marquee>

There are many options to the marquee tag, though, which make it slightly less annoying than the blink tag. The slide and alternate options let you pick how you want your marquee to behave. With the slide option the marquee will appear and instead of going from one side to the other and disappearing letter by letter as it exits to the right or left, it will disappear as a whole once the first letter hits the side of the screen. With the alternate option the marquee will bounce from side to side. Look at the examples:

This utilizes the slide option. Amazing, isn't it?

Here is the code for that marquee (slide):
<marquee behavior="slide">This utilizes the slide option. Amazing, isn't it?</marquee>

This utilizes the alternate option

Here is the code for the alternate marquee:
<marquee bahavior="alternate">This utilizes the alternate option. Technology at it's best</marquee>

Ah, but that's not all. You can also control the height and width of the marquee. Just insert the usual height or width tag (or both) and you're good to go. Here's an example of a marquee with a height of 60 pixels and a width of 300 pixels:
<marquee width="300" height="60">Here is the hieght and width example</marquee>

Here is the actual height and width example

You can control the amount of space in between your marquee and the other body elements with the tags vspace and hspace. Vertical space is what vspace stands for, and that dictates how much space will be between the top and bottom of your marquee and the rest of the page. Horizontal space (hspace) dictates the space to the right and left of the marquee.

Here's an example of both of those in use. You can use them individually, but it's always good to use both just for good luck's sake, or something. Here the example code is:
<marquee hspace="10" vspace="20">Here is the marquee with 10 and 20 as settings</marquee>

Here is the marquee with 10 and 20 as settings

The loop setting dictates how many times the marquee will loop. -1 and 0 will each produce a marquee that will loop indefinitely, and all the other integers (numbers) will produce results corresponding to the number used. For brevity's sake all of the examples will henceforth not include a closing tag. All closing tags are nothing more than </marquee> anyway. Oh yeah, and if you don't see anything below, that means you should hit 'reload' because by the time you got to this point in the page it might have scrolled five times already.

<marquee loop=5>This will loop 5 times

You can even control the background color of the scrolling marquee! Wow, life in the information age sure is cool. Here's some example code, I'm sure you get the idea:
<marquee bgcolor=white
You can put hex codes in place of color word names if you want.

Do you want to control the speed at which it scrolls? Even if you're like me and you don't care, you should at least know that you can. Scrollamount and scrolldelay come into play here. A scroll amount of 25 will dictate that the marquee will move in the direction 25 pixels each time it moves. A scroll delay of 30 wil dictate that it will pause (delay) 30 milliseconds in between each move. Here's some sample code showing both at work:

<marquee scrolldelay=30 scrollamount=25</marquee>

Well, that's that. Keep it real, and remember: form after function. Pretty sites still suck if the links are broken and the images are mis-sized.


Iframe Vs. Nothing

So, you think frames are annoying? If you do, then here's a whole other type of frames for you to dislike, and if you like frames, then here's a whole other brand of frames for you to enjoy. But only if you use Internet Explorer can you see these. Netscape totally ignores these commands.

"Floating frames", as they are called, float. Well, they don't really float, but they can be placed anywhere on the page you want them. Not only that but they are treated like any other block-level element (tables, images, etc.) and they are not fixed. They will disappear just like everything else when you scroll away from them.

Now I will show you a list of all the iframe elements. Following that list will be explanations. If you haven't learned how to do basic frames, which are compatable in almost all browsers anywhere (and all new browsers), then you should check it out.

attribute what the command does example
iframe Signifies a floating frame <iframe>
src the address of the page in the frame <iframe src="page.html">
name the name of the frame (for targeting) <iframe name="main">
width the width of the frame <iframe width="100">
hieght the height of the frame <iframe height="200">
frameborder sets the border's width <iframe frameborder=2>
scrolling sets whether or not it will have scroll bars <iframe scrolling="no">
hspace sets top and bottom of frames padding <iframe hspace="2"
vspace sets left and right of frames padding <iframe hspace="25"
align aligns the frame to the left, right, or center <iframe align="center">

Explanations

iframe This is the opening tag
src This is the location of the page in the frame
name This is the name of the frame. If you are going to target, then you must name the frames. If you don't know what targeting is, then consult the frames tutorial. Yes, targeting also works in floating frames.
width Sets the width of the floating frame
height Sets the height of the floating frame
frameborder Sets the outside border of the frame. Works and looks just the same as the table border tag in tables and frameborder tag in normal frames.
scrolling Sets the option of having a scroll bar on the floating frame. Options are 'yes' or 'no.
vspace Sets the margins on the top and bottom of the frame
hspace Sets the margins on the left and right of the frame
align Positions the frame to the left, right, or center

Here is an example of a floating frame to finish you up. In case you're curious the border is one, the width is 400 pixels, the height is 250, and the scrolling is yes. You can only see this with Internet Explorer 3.0 or higher.


Multiple columns Vs. Nothing

If you don't have the Netscape browser, then this text is not set up into nice, neat columns. If you do have Netscape, then it is, quite obviously. How did I do it? I'll show you right about now: The multicol tag. This tag gives you the option of making columns, picking the number of columns to have, the length of the gutter in between each columns, and the overall width of the columns on your page.

Here are the tags and elements of multicol.

<multicol> and </multicol> are the opening and closing tags for columns. While the closing tag does not get changed, the opening tag is useless as is. You have to choose how many columns, the gutter between them, and the width of the columns as a whole. All that information will be added onto the opening tag before the closing bracket (>).

As a reference I will show you the HTML used to make the above columns.

<multicol cols="3" gutter="10">This is where the text would be</multicol>

That's simple enough, right? Remember, if you are an Internet Explorer user this demo didn't work because Microsoft's browser does not support columning.

Well, that's it for now. Be sure to go back to the top of the page and choose another exciting adventure in HTML to pursue, or you could delve into another Internet programming language.

| Site Map |

| HTML |
HTML Guide Home
| Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 |

ADD'L SITE HELP
| Master Tag list | Questions? Comments? |
| Resources | Tips and tricks | Friends of The Slacker's Guide |
| Promote Your Web Site | Gif or JPEG? | Page Layout W/ Tables |
| How Cool Are You? |
| Are You Cool Enough To Link To The Slacker's Guide? |

| Cascading Style Sheets |
Slacker's Guide to StyleSheets
| Selectors | Properties in CSS | Values |

Free Quality Software
| Free Web Tools & Downloads |

Browser Resource
| Free Browser Downloads and More |

Contact
| Email the webmaster |

Click Here!