DHTML Div vs. Layer

[Mac]

Im having difficulty with the DIV tag in NS. I need to use Layers. I have attached a sample piece of code. Not sure if its helpful. I need to convert it to layers, any ideas? Or am I going about this the wrong way?

Thx, Mac
----------------------------

<div id=teamInfoOne>
<table cellspacing=0 cellpadding=0 width=100% bgcolor=#819FC1 border=0>
<tr>
<td class="cu" align="left">HEADQUARTERS | <a class="cu" href="javascript:display('teamInfoTwo',1);">FINANCIAL
INFORMATION</a> | <a class="cu" href="javascript:display('teamInfoThree',1);">MEDIA
CONTACTS</a> | <a class="cu" href="javascript:display('teamInfoFive',1);">OPERATIONS</a>
| <a class="cu" href="javascript:display('teamInfoFour',1);">OTHER
SERVICES </a></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><strong>Bethesda National Headquarters</strong></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr valign="top">
<td width="50%">7500 Old Georgetown Road<br>
Bethesda, MD 20814</td>
<td width="50%">Phone: 800-555-1212<br>
Fax: 800-555-1212<br>
Email: <a href="mailto:info@newco.com">info@newco.com</a></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><strong>San Francisco Regional Office</strong></td>
</tr>
<tr>
<td height="20"><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr valign="top">
<td width="50%">7500 Old Georgetown Road<br>
Bethesda, MD 20814</td>
<td width="50%">Phone: 800-555-1212<br>
Fax: 800-555-1212<br>
Email: <a href="mailto:info@newco.com">info@newco.com</a></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><strong>Portland Regional Office</strong></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr valign="top">
<td width="50%">7500 Old Georgetown Road<br>
Bethesda, MD 20814</td>
<td width="50%">Phone: 800-555-1212<br>
Fax: 800-555-1212<br>
Email: <a href="mailto:info@newco.com">info@newco.com</a></td>
</tr>
</table></td>
</tr>
</table>
</div>
----------------------------

[scoutt]

and what is the problem you are having?

what is the style sheet that it is using?

[Mac]

It doesnt work at all in NS. Only works in IE. Then I re-did one and it doesnt work in NS 7, but works in NS 4.

Mac

Here is CSS info.

<style type="text/css">
.cu {
color: #FFFFFF;
font-family: Verdana, Arial;
font-size: 10px;
font-style: normal;
font-variant: small-caps;
}

a.cu, a.cu:hover, a.cu:visited {
color: #FFFFFF;
font-family: Verdana, Arial;
font-size: 10px;
font-style: normal;
font-variant: small-caps;
}
#teamInfoOne {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
LEFT: 180px;
VISIBILITY: visible;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
POSITION: absolute;
TOP: 125px;
width: 590;
}
#teamInfoTwo {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
LEFT: 180px;
VISIBILITY: hidden;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
POSITION: absolute;
TOP: 125px;
width: 590;
}
#teamInfoThree {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
LEFT: 180px;
VISIBILITY: hidden;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
POSITION: absolute;
TOP: 125px;
width: 590;
}
#teamInfoFour {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
LEFT: 180px;
VISIBILITY: hidden;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
POSITION: absolute;
TOP: 125px;
width: 590;
}
#teamInfoFive {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
LEFT: 180px;
VISIBILITY: hidden;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
POSITION: absolute;
TOP: 125px;
width: 590;
}
</style>

[scoutt]

well NS4 will not understand half of these

#teamInfoOne {
BORDER-RIGHT: 0px; //buggy
PADDING-RIGHT: 0px; //buggy
BORDER-TOP: 0px; //buggy
PADDING-LEFT: 0px; //buggy
LEFT: 180px;
VISIBILITY: visible;
PADDING-BOTTOM: 0px; //buggy
MARGIN: 0px; //no
BORDER-LEFT: 0px; //buggy
PADDING-TOP: 0px; //buggy
BORDER-BOTTOM: 0px; //buggy
POSITION: absolute; // buggy
TOP: 125px;
width: 590;
}

but NS7 should use them all. do you have a smaple we can see?

[Mac]

Give me 15min, and I will have something you can see.

Mac

[Mac]

take a look here...


http://www.macleanw.com/mocks/


Basically when you use IE it works great, but NS not at all.

Mac

[scoutt]

why are you using a class for your links? they have a style all to there own

a{}
a:link{}
a:visited{}
a:hover{}

that migth be what NS is puking on. I will have to wait until I get home to look at it as I don't have NS loaded here at work.

[Mac]

for these particular links I need diff. style of the links than the normal. I have done that before and not had a problem with NS.

[kdjoergensen]

:hover is not supported by netscape. If you want to minic the effect you will need to resort to javascript (http://imaginethat.htmlplanet.com/DHTML/N4hover.html)

[giz]

Whilst you do have completely valid HTML code (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.macleanw.com%2Fmocks%2F&charset=%28detect+automatically%29&doctype=Inline&ss=&sp=) there are a worrying number of errors and warnings reported for the CSS (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.macleanw.com%2Fmocks%2F&warning=1&profile=css2).

[Mac]

Well...I seemed to have fixed all my issues. It works perfectly in IE, NS7, and NS4x. Quite the task. I appreciate everyones help.

Thx, Mac

[scoutt]

and the issues were?

[Mac]

Where to begin. I actually gave up on my original code. I took it from an ESPN section of there site. Worked fine for IE. Once I started having real problems with it outside of IE I abandoned it. Started fresh. Then I had it working in NS 7 and IE, but not NS4. So I then figured out that tables work within layers, but not layers within tables. After that correction, it worked perfectly in all 3 browsers.

I appreciate your help and in your follow-thru.

Cheers, Mac

[giz]

The site may yet fail in Mozilla, Opera, or some future standards-compliant browser due to the errors that I mentioned in my previous post (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.macleanw.com%2Fmocks%2F&warning=1&profile=css2).

[Mac]

I corrected most of the errors. So shouldnt be a huge problem going forward.

Thanks for all advice!

[DrDubbleB]

Might be good to know that I'm using IE and everything's misaligned. I'm running 1024x768 resolution.