DIV vs. SPAN

by Ryan Frishberg

In most previous examples, we've only used absolutely positioned layers, <div> tags to be specific. I should now mentions that a <span> tag is the same as a <div>, except <div> are block style elements (it puts a space on top of and below them...kind of like <p> tags), meaning it can't be inserted into a line for a continuous text feed (because it creates a new line), unlike <span> tags. Here's an example to illustrate what I mean.

If we use this code:

This is <div>some</div> text

It looks like this:

This is

some

text

If we use this code:

This is <span>some</span> text

It looks like this:

This is some text

I used the bolded text so that you could see what I was talking about. If you used the code specifically, the text wouldn't be bolded.

Cross-browser statically positioned elements

In IE 4+ and NS 6, you can do just about anything you want to statically positioned layers (some exceptions such as filters), but in NS 4, you can't do much to statically positioned <div> and <span> tags. Instead, we'll have to use Netscape 4's proprietary <layer> tag, coupled with it's <ilayer> tag, which allows us to apply DHTML effects to statically positioned elements. For example, let's say we wanted to apply a mouseover background color change in IE 4+ and NN 4+ in a table cell. It's unrealistic to use absolutely positioned layers over the table, so instead, we can use this code:

And that produces:

This is the cell's text

Which works in all browsers; go ahead and try it!

Now, using that technique (<layer> inside of an <ilayer> for Netscape 4 and a regular <div> tag for IE 4+ and Netscape 6), you can do almost anything you want statically positioned, including changing a layer's content.

Next -->