This is in regards to a problem that I encountered while coding and
testing a page in Mozilla 0.8. It has to do with changing style
attributes
using javascript and how it affects <A> tags. Any help would be greatly
appreciated.
Thanx...
--Daniel
>>>My website is (was) going pretty great. The deal is essentially that I have some
>text inside an <A> element inside a <DIV> element. Whenever I use
javascript to assign a style change to the containing div, the <a>
element disappears. Like it's totally gone.
I've tested this with a couple of different lines of javascript and with
various different style attributes and the results the same. I know that
for some reason the <a> element and the style sheet rules assigned to it
are being ignored spontaneously. I know this because the text is no
longer treated like a link, no hand cursor, no underline, and the style
rules that should apply don't anymore.
I can't find any reference to this in documentation, reference books
etc. I can't figure out if this is some obscure (and I mean really
obscure) feature? or a bug of mozilla?
Below is a pared down copy of my page that demonstrates my problem.
Notice that everything is working fine until javascript is used to
assign values. I am still not sure if the same thing happens in IE (I
can't install it on my home computer)
Adrian wrote:
> But is this it: you're turning the visibility of <DIV> to hidden? Well,
> DIV is a block element and stuff like visibility, position etc affect
> all its children as well. So if you make a DIV invisible, everthing
> inside it disappears as well.
Sorry that isn't it. Yes it should become invisible, but then it should
become visible again when the containing div element does. Also
Everything else becomes visible, except for the <A> element which
dispappears entirely.
Also, I considered the possibility that visibility is not being
inherited exclusively for the <A> element but this is refuted by the
fact that the same disappearing act occurs when any style attribute is
changed, not just visibility.
Once again, the problem is that when a style attribute of a div element
is changed using javascript, all the <A> elements contained by it
disappear and the block is displayed as if they never existed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Bug or Not?</TITLE>
<!-- first style applies to all div blocks that are each a button on the
menu, the 'a' style should apply to all links and anchors -->
<STYLE TYPE="text/css">
.menu{width:150px; height:25px; padding:0px 5px;
background-color:#9BBBC4;
font-family:fantasy, sans-serif; font-size:110%;
font-variant:small-caps;}
a{text-decoration:none; color:#6B88AD;}
</STYLE>
<!-- both functions do two things, first change the color of the button
calling the function, and then changing the visibility of the div's
whose ids follow. the first arg is always [this], as a quick reference
to the button itself, and the for loop takes care of the visibility of
the named id's These are the main functions I will be using in my popup
menu-->
<SCRIPT TYPE="text/javascript">
function here(){
var args = here.arguments;
args[0].style.backgroundColor ='#A7C7CA';
for (var n=1; n<args.length; n++){
document.getElementById(args[n]).style.visibility='visible';}}
function gone(){
var args = gone.arguments;
args[0].style.backgroundColor ='#9BBBC4';
for (var n=1; n<args.length; n++){
document.getElementById(args[n]).style.visibility='hidden';}}
</SCRIPT>
<BODY>
<DIV STYLE="position:absolute; left:20px; top:30px;
z-index:1;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD><A HREF="#"><DIV CLASS="menu" onMouseOver="here(this,
'zink')" onMouseOut="gone(this, 'zink');">Changing
visibility</DIV></A></TD></TR>
<!-- this button calls on my functions to demonstrate what happens when
visibility is changed in the second block-->
<TR><TD><A HREF="#"><DIV CLASS="menu" onMouseOver="here(this);
document.getElementById('zoink').style.backgroundColor='#FFFFFF';"
onMouseOut="gone(this);
document.getElementById('zoink').style.backgroundColor='#000000';">Changing
bgcolor</DIV></A></TD></TR>
<!-- this button manually changes the visibility of the third block to
show what happens when any style attribute is changed-->
</TABLE></DIV>
<!-- Second block-->
<DIV ID="zink" STYLE="position:absolute; left:20px; top:90px;
z-index:1;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD><A HREF="#"><DIV CLASS="menu" onMouseOver="here(this);"
onMouseOut="gone(this);">Watch The</DIV></A></TD></TR>
<TR><TD><A HREF="#"><DIV CLASS="menu" onMouseOver="here(this);"
onMouseOut="gone(this);">Text as the</DIV></A></TD></TR>
</TABLE></DIV>
<!-- Third block-->
<DIV ID="zoink" STYLE="position:absolute; left:20px; top:150px;
z-index:1;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD><A HREF="#"><DIV CLASS="menu" onMouseOver="here(this);"
onMouseOut="gone(this);">link element</DIV></A></TD></TR>
<TR><TD><A HREF="#"><DIV CLASS="menu" onMouseOver="here(this);"
onMouseOut="gone(this);">disappears</DIV></A></TD></TR>
</TABLE></DIV>
<!-- messing with the visibility of a div inactivates/deletes all of its
<A> links. WHY? -->
</BODY>
</HTML>
