[thelist] cross browser dhtml help wanted
jelle desramaults
nsg_chong at hotmail.com
Mon Sep 10 03:15:29 CDT 2001
nate,
I followed your (greatly appreciated) advice, i assigned a name="" as well
as an id="" to my div tag's.
NS still refuses to display the css properly. The only thing NS
seems to understand are the spefifications for the a tag, the rest of the
css is basically
a bunch of classes and is ignored by NS. This leads me to believe that i'm
defining my classes in a wrong way...
Here is my stylesheet (definded in the <head>), first impressions ?
(online @ http://www.sitekick.be/testarea/b3.html)
------------------------------------------------------------------
<style type="text/css">
.banner {position:absolute; left:500px; top:0px; width : 100px; height
:20px}
.top {position:absolute; left:0px; top:0px; width : 100%; height :20px;
background-color:#336600; layer-background-color:#336600; z-index : -1 }
.content {position:absolute; left:0px; top:19px; background-color:#336600;
layer-background-color:#ffcc66; z-index : -1}
.dropdown1 {position:absolute; left:0px; top:19px; width:50px;
height:60px;visibility:hidden;}
.dropdown2 {position:absolute; left:100px; top:19px; width:50px;
height:60px;visibility:hidden;}
.dropdown3 {position:absolute; left:200px; top:19px; width:50px;
height:60px;visibility:hidden;}
.dropdown4{position:absolute; left:300px; top:19px; width:50px;
height:60px;visibility:hidden;}
.dropdown5 {position:absolute; left:400px; top:19px; width:50px;
height:60px;visibility:hidden;}
a { color : #ffffff; font-family : arial; font-size : 11px; text-decoration
: none}
.text { color : #000000; font-family : arial; font-size : 11px;
text-decoration : none}
.FormtextField {
background-color : #ffffcc;
border : 1px dotted Black;
}
form{
border : 1px solid Black;
background-color : White;
padding : 20px;
}
.InnerContentDiv {margin-left : 100px; width : 400}
<!-- tabellen -->
.navTD {width:100;border-right : 1px solid #000000; text-align :center}
.dropdTBL {width : 100; height :40 ;border: 1px solid #000000}
.dropdTD1 {border-bottom : 1px solid #000000; text-align : center}
.dropdTD2 {text-align : center }
</style>
--------------------------------------------------------------------------
As for the your other tips:
you wrote:
> comment three:
> you currently have:
> <TD onmouseover="show('d3Div'); this.bgColor='#e7946b'"
> onmouseout="hide('d3Div'); this.bgColor='#339900'" class="dropdTD1">
> <a href="">link 1</a>
>
> what you might consider:
> <TD>
> <a href=""onmouseover="show('d3Div'); this.bgColor='#e7946b'"
> onmouseout="hide('d3Div'); this.bgColor='#339900'" class="dropdTD1">link
1</a>
>
> why? because capturing events, like "onmouseover", is much more reliable
> from within an <A> than within a <TD>.
I've put a mouseover event on a TD to keep the target layer visible after it
has dropped down,
- triggered by the link positioned in the div just above it ("visible"
links) -
If i were to put the mouseover event in the a tag, the target layer would
dissapear when i mouse
out the trigger layer.
liike so :
- this is the trigger, it toggles visibility for the target layer -
<TD onmouseover="show('d1Div')" onmouseout="hide('d1Div')"
class="navTD">
<A HREF="#">visibility</A>
</TD>
-if i move my mouse to the target layer, the target layer displays
itself -
- this is the target layer -
<TD onmouseover="show('d1Div'); this.bgColor='#e7946b'"
onmouseout="hide('d1Div'); this.bgColor='#339900'" class="dropdTD1">
<a href="">link 1</a>
</TD>
a big thanx !
, jelle "don'twannabeaDHTMLnewbienomore" Desramaults
----- Original Message -----
From: nate koechley <nate at vicksburgcollective.com>
To: <thelist at lists.evolt.org>
Sent: Thursday, September 06, 2001 11:05 AM
Subject: Re: [thelist] cross browser dhtml help wanted
> hey jelle,
>
> actually, i'm not sure it's working perfectly in IE afterall. (i'm on
> win2Kpro, IE5.50.4522.1800). (you're getting there though, good work.)
>
> comment one:
> symptoms: when i mouseOver "Visibility", i see a layer appear with two
> links in it. but, i can't click either of the links, because as soon as i
> mouseOut of "Visibility", en route to the links, the links disappear.
>
> but, that aside, here's some thoughts:
>
> comment two:
> you currently have:
> <DIV ID="d2Div" class="dropdown2">
>
> what you might consider:
> <DIV ID="d2Div" name="d2Div" class="dropdown2">
>
> why? because [i think] netscape will only reference an element by name,
not
> ID. so, put both in, and you'll keep more browsers happy.
>
> comment three:
> you currently have:
> <TD onmouseover="show('d3Div'); this.bgColor='#e7946b'"
> onmouseout="hide('d3Div'); this.bgColor='#339900'" class="dropdTD1">
> <a href="">link 1</a>
>
> what you might consider:
> <TD>
> <a href=""onmouseover="show('d3Div'); this.bgColor='#e7946b'"
> onmouseout="hide('d3Div'); this.bgColor='#339900'" class="dropdTD1">link
1</a>
>
> why? because capturing events, like "onmouseover", is much more reliable
> from within an <A> than within a <TD>.
>
> HTH,
> cheers,
> nate
>
>
> At 05:45 PM 9/6/2001 -0700, you wrote:
> >Evolters,
> >
> >I just started playing around with DHTML, my firstborn works great in IE,
> >but sux0rs on NS.
> >Any of you feel like taking a peek and giving me some pointers as to
what i
> >need to do to get ma baby cross browser accessible ? (i don't have a clue
> >...)
> >
> >http://www.sitekick.be/testarea/b3.html
> >
> >muchos gracias, jelle
> >
> >
> >Jelle Desramaults
> >www.sitekick.be
> >
> >---------------------------------------
> >For unsubscribe and other options, including
> >the Tip Harvester and archive of TheList go to:
> >http://lists.evolt.org Workers of the Web, evolt !
>
>
> ---------------------------------------
> For unsubscribe and other options, including
> the Tip Harvester and archive of TheList go to:
> http://lists.evolt.org Workers of the Web, evolt !
>
More information about the thelist
mailing list