Netscape CSS problem

R

Robert Mark Bram

Howdy all!

I have built a page that uses CSS in such a way that rolling mouse over the
link should hide and display a red box with Hello World in it.. it works in
IE but not in Netscape. Can anyone tell me why? I don't think it is the
JavaScript - Netscape isn't displaying the layer as red.. nor is it
displaying it in the correct position...

Any help would be most appreciated!

Rob
:)


<html>
<head>
<title>Listing 12.1</title>
<style type="text/css">
<!--
#layer
{
background-color:red;
height:100px;
left:10px;
position:absolute;
top:50px;
width:100px;
visibility:hidden;
}
-->
</style>

<script type="text/javascript">

function changeState (layerName, state)
{
var blockElement = document.getElementById(layerName);
blockElement.style.visibility = state;
} // end changeState function

</script>
</head>
<body onLoad="obtainInfo();">
<div name="layer" id="layer">
Hello World!
</div>
<p>
<a href="javascript:void(0)"
onMouseOut="changeState('layer','hidden')"
onMouseOver="changeState('layer','visible')">
Rollover to show and hide the layer. :)
</a>
</p>
</body>
</html>
 
R

Robert Mark Bram

Howdy - thanks for the effort you have taken.

Can you please double check this page to see if it works (I uploaded the
javascript too).

http://home.connexus.net.au/~bramay/Listing12.1.html

Is there a setting in Netscape that might be preventing CSS from working
correctly? I still cannot view a red layer in Netscape from this page and it
is most frustrating!

Rob
:)
 
B

Beauregard T. Shagnasty

Robert Mark Bram pounced upon this pigeonhole and pronounced:
Howdy - thanks for the effort you have taken.

Can you please double check this page to see if it works (I uploaded the
javascript too).

http://home.connexus.net.au/~bramay/Listing12.1.html

Is there a setting in Netscape that might be preventing CSS from working
correctly? I still cannot view a red layer in Netscape from this page and it
is most frustrating!

Nothing happens in my browser because JavaScript is turned off. Why don't
you use CSS hover to do what you want?
 
D

DU

Robert said:
Howdy - thanks for the effort you have taken.

Can you please double check this page to see if it works (I uploaded the
javascript too).

http://home.connexus.net.au/~bramay/Listing12.1.html

Is there a setting in Netscape that might be preventing CSS from working
correctly? I still cannot view a red layer in Netscape from this page and it
is most frustrating!

Rob
:)

I can't find the source of the error at your page... but interestingly,
Mozilla reported a security error... which I should have saved instead
of disposing of it..

Try my pages:

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Listing12_1.html
Basically, your a href code

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Listing12_1_1.html
with a p:hover code.

Both files work without a problem in NS 7.1, Mozilla 1.4, MSIE 6 for
Windows and Opera 7.20 beta2 (build 3014) and both files have minor
changes from your own page.

Interactive demo on CSS positioning:
http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Positioning.html

Again, I strongly recommend you drop the "javascript:" pseudo-protocol
in href value (I'm not explaining, expliciting why here... sorry). A
link should be a link with valid href value, otherwise you mislead both
the browsers' code, the browsers' functionalities and the users. In the
past, there was an excellent discussion on these issues in alt.html and
often this is repeated in comp.lang.javascript newsgroup. J. Nielsen
also demonstrate well why this should be.

Also, people have a tendency to give the same attribute name value to an
id attribute value when they can and I think this is a bad idea, a
non-recommendable coding practice. Giving distinct, unique values help
debugging, reviewing by others, helps getting assistance with debuggers,
etc..

In any case, your div should not have a name attribute. Validating your
markup is best.

Finally, I checked your obtainInfo code (browser detect) and I also do
not recommend this way of detecting browsers for many reasons I won't
detail:
- many browsers allow users to modify the user agent string
- from versions to versions, browsers have different support for object
properties, methods, etc..
I think you should upgrade your openWindow code and avoid eval() calls
always and everywhere in your functions.

DU
 
D

David Graham

Robert Mark Bram said:
Howdy - thanks for the effort you have taken.

Can you please double check this page to see if it works (I uploaded the
javascript too).

http://home.connexus.net.au/~bramay/Listing12.1.html

Is there a setting in Netscape that might be preventing CSS from working
correctly? I still cannot view a red layer in Netscape from this page and it
is most frustrating!

Rob
:)
Hi
It worked in my NN7.01 when I saved the file locally on my PC but not when I
try it over the internet from your site. Perhaps someone in this group will
know why.
bye
David
 
B

Beauregard T. Shagnasty

Robert Mark Bram pounced upon this pigeonhole and pronounced:
Howdy BTS!


I am writing a course on JavaScript.. :)

Rob
:)

Oh then, by all means, move forward! <g>

JavaScript does have its place, I suppose. Just be sure the students know
not to use it for anything critical to the operation of the pages.
 
D

DU

Robert said:
Howdy DU!




The error was the html comment within the style tag!




Possibly the sniffing code.. or the eval() call?


http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Listing12_1.html



Thank you - that helped me spot what was wrong.


http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Listing12_1_1.htm
l



That is a nice effect.



http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Positioning.html

Impressive and complex example - I will study this one..




Yeah, I am aware of the misuse of the status bar with an effect like this. I
might make use of a style sheet instead to give the text a "link" look,
rather than a void JavaScript HREF.

No, it's much more than the statusbar. It's right-click context menu,
the link properties, the opening in another tab no longer possible, in
another new window instance no longer possible, the View/Page Info/Links
tab in Mozilla-based browsers become unreliable, etc... The
"javascript:" pseudo-protocol pretty much fools the browsers, other user
agents and misleads/confuses/defeats browser functionalities. It's not
reliable. You can't call DOM methods on it since it's not a valid
protocol for an href, etc,etc.. J. Nielsen and others pretty much
explained why it's bad.

Top Ten Web-Design Mistakes of 2002
6. JavaScript in Links:
"Links that don't behave as expected undermine users' understanding of
their own system. A link should be a simple hypertext reference that
replaces the current page with new content. (...) link is not a piece of
code that interferes with the browser's standard behavior."
http://www.useit.com/alertbox/20021223.html

The Top Ten New Mistakes of Web Design
3. Non-Standard Use of GUI Widgets
"Interaction consistency is an additional reason it's wrong to open new
browser windows: the standard result of clicking a link is that the
destination page replaces the origination page in the same browser
window. Anything else is a violation of the users' expectations and
makes them feel insecure in their mastery of the Web."
http://www.useit.com/alertbox/990530.html

Good advice. Thanks.




I was working from a book example for that - I will work on this a bit more.

What a great response.. thank you again!

Rob
:)

DU
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top