Layers

can search engines read them?

[oldtimer]

Not being a design techie, I think I know the answer but would like confirmation

A site I'm promoting needs upgrading. It apparently has to have an 'informal' look with multiple pictures and associated text in a haphazard layout.

At present it is in deeply (very) nested tables and I've said that has to go - those pages aren't being searched on, though they are indexed. The webmaster wants to put it in layers to keep the existing layout. Is this like an image and equally unreadable by the spiders?

[Brett_Tabke]

However, they are starting to toy with iframes. I have caught one engine downloading my iframe content.

[edited by Brett Tabke]

[rcjordan]

Doesn't this proposed design change raise browser compatability problems? Aren't layers NS-only? In the version 4 wars, had to write a cross-browser routine to swap iframes for layers/ilayers to get around this problem.

NS4 doesn't handle iframes, NS6 is supposed to.

[seth_wilde]

I market a sight that is built using 100% layers it's still kind of early for the final vertic, but so far I've been happy with what I've seen. It's not like frames, all the text is still in the main html, it's just in div tags.

There is some compatibility issues with earlier browsers, but most 4.0 browser and up handle it with no problem.

[rcjordan]

**tweet** Time out. Call for the referee on this one. I think <layer> and <ilayer> is still out on IE5. I don't know about <div> (have never used it). Could certainly be wrong, but are we talking about the same type of implementation here?

[seth_wilde]

we use tags like

<div id="Layer1" style="position:absolute; left:6px; top:9px; width:44px; height:39px; z-index:5">

which is how dreamweaver wrights layers.

[Brett_Tabke]

Oh, my bad. I should know better than to stick my nose into html issues. I was thinking doc insertion on the fly. (can you tell, I don't write for nn).

[rcjordan]

And here's the section of browser-sniffing code where I write a layer tag (serving a banner):

if (!isProbBrows && is.nav4up) {
document.write("<ILAYER><LAYER ");
document.write("src='http://blahblah.com" + "?" + random + "' CLIP=0,0,800,65></LAYER>");
document.write("</ILAYER> ");

This duplicates an iframe tag, I don't think IE5 would read mine. (??)

Edited by: rcjordan

[tedster]

I agree -- stay away from layers. This was a non-standard introduction with Netscape 4, and I don't think it made it into "strict" HTML 4.0. This means that even Netscape 6 probably won't support it.

1) If you're willing to restrict your audience to version 4 browsers and up, divs work.

2) Divs can be absolutely positioned, even on the z-axis, giving a layered effect.

3) With absolutely positioned divs you can arrange the HTML code with the most search engine-friendly text right at the top.

4) Divs can be written for cross-browser and cross-platform compatibility.

It's best to do good testing for compatibility. Oddities occur, especially with Mac browsers. Most especially checkout AOL Mac browsers -- the blackest sheep in the browser family.

[tedster]

Here are a few other approaches to getting rid of those nested layout tables. These have much wider compatibility than absolute positioning.

I often can code the exact layout appearance I want by using a clear pixel gif, dimensioned exactly the way I want, and placed inline with either align=left or align=right.

Another way is to include extra transparent space in the gif itself -- that is, if you have a 100x100 gif, make it 140x110 with the extra space transparent.

With a jpeg, use extra background color around the edges of the image, but beware of color shifts when compressing at a high level.

Hspace and vspace have some use as well, if the symmetrical space they add is OK. I prefer to add space to the image itself so I can have non-symmetrical image placements.

[DaveAtIFG]

I still design for V3 browsers and have no experience with iframes or the like. But div tags were in the HTML 3.2 spec (and probably earlier) and will cause you no problems with the SEs. Plain old frames, nested at most two deep, and transparent gifs, always provide good SE results for me. And I can usually get the look I want without resorting to unique pages for different browsers.

[oldtimer]

Many thanks - just what I wanted to hear :)