Path // www.yourhtmlsource.com → Text → MARQUEES

Marquees

Internet Explorer scrolling marquees allow you to have formatted text running across the screen over a coloured background, so you can display many different pieces of information all on one line.

This page was last updated on 2012-08-21

Scrolling Marquees

First, the warning:

Browser Compatibility Note:

Marquees were invented as an » Internet Explorer-only tag. For some reason, » Firefox and » Opera support them too. They will not scroll in Netscape 4, and will just be static text.

The <marquee> tag is non-standard HTML, and will make your markup invalid. This is to be avoided. Do not use them.

If you insist doggedly on implementing a marquee, here's your first example:

Look at me, I can fly!

Isn't that nice? Well yes, a bit. The tag to create these scrolling marquees is <marquee>. A simple scroller like the one above is created thusly:

<marquee>scrolling text</marquee>

Easy, eh? Of course, you're going to want to tamper with it as much as possible, so the attributes available to you are:

bgcolor="...": this allows you to give the scroller a background colour. It can be defined in HEX colour codes, or as a named colour.
loop="...": this allows you to set how many times the marquee will scroll across the screen. Set it to a numerical value, or make it infinite to go forever.
direction="...": denotes which direction the text will appear from. If you don't change it to left the text will always appear from the right.
behavior="...": this sets which type of scroll you get. scroll is the default, slide makes the text come in and stop, and alternate makes it come in and then bounce back and go the other way.
scrollamount="...": specifies the delay, in pixels, for the browser to wait before sending the text across again once it has made it to the other side. A high value, strangely, makes it go fast.
scrolldelay="...": sets the number of milliseconds between each instance of the text. This controls the speed of the scroll. A high value makes it go slowly.
height="...": sets the height of the marquee in pixels, just like an image height.
width="...": partner to the attribute above, this sets the scroll's width, in pixels or as a percentage of the screen width. Default is 100%.
align="...": marquees can carry all the values for align that images can. If you've specified the width of your scroller as something other than 100%, you can use left, right or center. You can specify its relationship to surrounding text using absbottom, absmiddle, baseline, bottom, top and texttop.
hspace="...": identical to the image tag of the same name, this adds a margin of blank space to the sides of the marquee.
vspace="...": this adds a margin to the top and bottom.

A more fully-outfitted marquee might look something like this:

<marquee bgcolor="#ffffff" width="80%" behavior="alternate">Scrolling text</marquee>

The stuff you put inside the marquee tags doesn't have to be plain text. You can have a row of links, formatted text or even images moving across the page. Observe: