DIVs don't appear in FireFox - any ideas?

Gregor

I am trying to use an image map with a mouseover function to show
various DIV tags. I am not an expert, but what I've come up with works
in IE but not in FireFox. Any insight would be greatly appreciated.

Below is the js and CSS code

<SCRIPT TYPE="text/javascript">

</script>
<style type="text/css">

</style>

*************** *************** ***************
Here's the code for the image and map

<td><IMG NAME="projector _config_01" SRC="images/projector2.jpg"
WIDTH=718 HEIGHT=271 BORDER=0 ALT="" USEMAP="#projec tor2_Map"
z-index="1">
<MAP NAME="projector 2_Map">
<AREA SHAPE="rect" ALT="" COORDS="468,106 ,550,132"
ONMOUSEOVER="sh owMenu('Compone ntNav','','show ')"
onMouseOut="hid eMenu('Componen tNav','','hide' )">
<AREA SHAPE="rect" ALT="" COORDS="365,106 ,419,130"
ONMOUSEOVER="sh owMenu('RCAaudN av','','show')"
onMouseOut="hid eMenu('RCAaudNa v','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="579,63, 650,90"
ONMOUSEOVER="sh owMenu('DVINav' ,'','show')"
onMouseOut="hid eMenu('DVINav', '','hide')">
<AREA SHAPE="rect" ALT="" COORDS="487,63, 540,89"
ONMOUSEOVER="sh owMenu('VGAinNa v','','show')"
onMouseOut="hid eMenu('VGAinNav ','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="430,63, 460,89"
ONMOUSEOVER="sh owMenu('SvidNav ','','show')"
onMouseOut="hid eMenu('SvidNav' ,'','hide')">
<AREA SHAPE="rect" ALT="" COORDS="392,63, 416,89"
ONMOUSEOVER="sh owMenu('RCAvidN av','','show')"
onMouseOut="hid eMenu('RCAvidNa v','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="356,63, 376,89"
ONMOUSEOVER="sh owMenu('35mmNav ','','show')"
onMouseOut="hid eMenu('mmNav',' ','hide')">
<AREA SHAPE="rect" ALT="" COORDS="272,63, 323,90"
ONMOUSEOVER="sh owMenu('VGAoutN av','','show')"
onMouseOut="hid eMenu('VGAoutNa v','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="65,63,1 64,90" target="_blank"
ONMOUSEOVER="sh owMenu('M1Nav', '','show')"
onMouseOut="hid eMenu('M1Nav',' ','hide')">

</MAP>
</td>
*************** *************** *************** *************** ******
And finally the DIVs

<div id="ComponentNa v">
text9text9text9 text9text9text9 text9
</div>

<div id="mmNav">
text8text8text8 text8text8text8 text8
</div>

<div id="M1Nav">
text7text7 text7 text7 text7 text7
</div>

<div id="RCAaudNav" >
text6text6text6 text6text6text6 text6
</div>

<div id="RCAvidNav" >
text5text5text5 text5text5text5 text5
</div>

<div id="SvidNav">
text4text4text4 text4text4text4 text4
</div>

<div id="DVINav">
Text3Text3Text3 Text3Text3Text3 Text3
</div>

<div id="VGAinNav">
Text2Text2Text2 Text2Text2Text2 Text2
</div>

<div id="VGAoutNav" >
TextTextTextTex tTextTextTextTe xt
</div>

Aug 26 '05 #1

Subscribe Reply

1712

David Dorward

Gregor wrote:

if (document.layer s) {
Netscape 4.x specific.
} else if (document.all) {

Internet Explorer specific.

See http://www.mozilla.org/docs/web-deve...ade_2.html#dom
--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Aug 26 '05 #2

Gérard Talbot

Gregor wrote :

I am trying to use an image map with a mouseover function to show
various DIV tags. I am not an expert, but what I've come up with works
in IE but not in FireFox. Any insight would be greatly appreciated.

Below is the js and CSS code

<SCRIPT TYPE="text/javascript">

</script>
<style type="text/css">
<!--
.bluebold { font-family: Arial, Helvetica, sans-serif, Verdana;
sans-serif should be the last item.
http://www.w3.org/TR/CSS21/fonts.htm...ef-font-family
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
bold; text-transform: none; color: #0070C8}
Regarding font-size:

W3C Quality Assurance tip for webmaster:
Care With Font Size, Recommended Practices
"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser).
Use relative length units such as percent or (better) em"

.black { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
normal; text-transform: none; color: #000000}
.blacksm { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 8pt; font-style: normal; line-height: 12pt; font-weight:
normal; text-transform: none; color: #000000}
.blackbold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
bold; text-transform: none; color: #000000}
.yellowsmbold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 7.5pt; font-style: normal; line-height: 10pt; font-weight:
bold; text-transform: none; color: #FFFF00}

The initial value of text-transform is none; so unless you're modifying
that value, there is no need to declare text-transform: none.
div#ComponentNa v {position:absol ute; width:620px; height:140px;
left:13px; top: 35px; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden; z-index: 100}
layer-background-color is not W3C CSS 2 compliant; it is only understood
by NS 4.
div#DigCoaxNav {position:absol ute; width:620px; height:140px;
left:13px; top: 35px; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden; z-index: 99}
[snipped]
Here's the code for the image and map

<td><IMG NAME="projector _config_01" SRC="images/projector2.jpg"
WIDTH=718 HEIGHT=271 BORDER=0 ALT="" USEMAP="#projec tor2_Map"
z-index="1">
<MAP NAME="projector 2_Map">
<AREA SHAPE="rect" ALT="" COORDS="468,106 ,550,132"
ONMOUSEOVER="sh owMenu('Compone ntNav','','show ')"
onMouseOut="hid eMenu('Componen tNav','','hide' )">

Your original code for showMenu and hideMenu had only 1 parameter. You
only need 1 parameter too.

Gérard
--
remove blah to email me

Aug 26 '05 #3

Gregor

Gerard,

Thanks for the assistance. I understand your points and based on W3C
standards it all makes sense. That said, I am still having issues. I
tried using your code

function showMenu(menuNa me)
if(curMenu != "")
{
document.getEle mentById(curMen u).style.visibi lity = "hidden";
};
document.getEle mentById(menuNa me).style.visib ility = "visible";
curMenu = menuName;

and the hideMenu version of it, but no luck. I've adjusted the
onmouseover and onmouseout to hidden and visible to ensure they are
consistent with the JS. I am still getting JS errors. I am not
including more of the code I modified b/c I really want to overcome
this on my own and learn, but I haven't learned yet :)

Can you perhaps point me in a general direction?

Aug 29 '05 #4

Gérard Talbot

Gregor wrote :

Gerard,

Thanks for the assistance. I understand your points and based on W3C
standards it all makes sense. That said, I am still having issues. I
tried using your code

function showMenu(menuNa me)
if(curMenu != "")
{
document.getEle mentById(curMen u).style.visibi lity = "hidden";
};
document.getEle mentById(menuNa me).style.visib ility = "visible";
curMenu = menuName;

and the hideMenu version of it, but no luck. I've adjusted the
onmouseover and onmouseout to hidden and visible to ensure they are
consistent with the JS. I am still getting JS errors.
I do not see the errors over here, you know. No clue.

I am not including more of the code I modified b/c I really want to overcome
this on my own and learn, but I haven't learned yet :)
Ok. Well, this is an excellent attitude... which is unfortunately not
dominant in web programming newsgroups.

Can you perhaps point me in a general direction?

Gregor, best is to first provide an URL where your code, all of it, is.
Also, tell me what errors you see in the js console.
The code I gave is good: that I'm sure of.

Gérard
--
remove blah to email me

Sep 1 '05 #5

Similar topics

3047

CSS Positioning divs wrt unrelated divs in IE

by: Egon Pasztor | last post by:

Hi. I'm new at CSS, so maybe this is obvious, but I've looked around quite a bit looking for a solution. I'm playing with the vertical positioning of elements in a 2-column layout. The prototype "scaffolding" page I'm playing with is here: http://www.eecs.berkeley.edu/~pasztor/test.html It looks right in "Mozilla Firefox", but not in IE 6. In IE 6, the three "nav" blocks are rendered right after one another in a vertical column.

HTML / CSS

10222

Making empty divs appear side by side

by: Aaron | last post by:

I have the following divs: <div style="background-image: url(images/house_01.jpg); width: 249px; height: 346px;"></div> <div style="background-image: url(images/house_02.jpg); width: 251px; height: 346px;"></div> Since by default, the display property is set to block, they show up on different lines. Since each div contains half of a complete background image, I need then to show up side-by-side. The thing is, when I set the

HTML / CSS

2821

floating divs

by: meltedown | last post by:

I would like the floating divs to float and then the header to come after them , on the left. That's what I thought clearing the floats was for, but in this example, the header is to the right of the floating divs, nothing is cleared. What am I doing wrong ? Here is the url:http://www.reenie.org/test/test5.php Here is the code: <html> <head>

HTML / CSS

3618

hide & show divs with different text msgs in the same place on the screen???

by: tlyczko | last post by:

Hello, I've searched on toggling divs and didn't really find what I was looking for, I saved a bunch of different threads. I have a form with several different text boxes for things like dates, numbers, etc. arranged in a table, each row has the same kind of text boxes for data entry (10 rows probably). I want to have a separate section above the form where I can toggle a div containing an appropriate error message to appear after the...

Javascript

8290

3 floated DIVs in a row in IE - gap between last two DIVs - why?

by: tasman.hayes | last post by:

I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs have a grey background. When I view the page in Firefox, I get what I hoped for: there is a solid grey rectangle at the top of the website. When I view the page in Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs (i.e. a...

HTML / CSS

1353

Continuing CSS learning Divs not staying put in Mozilla

by: Patrick | last post by:

Hi All, Background image is in place and a Div (yellow border) inside center Div column is positioned where I want it to be. Now the problem is that in Mozilla my third column div is dropping down below the wrapper but is exactly where it is supposed to be in IE. I've tried some clears and stuff like that but to no avail. What is causing this and how do I fix it? http://ocg6.marine.usf.edu/patrick/test_css/test.html

HTML / CSS

6201

How do i center align divs

by: roula | last post by:

I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them work in a certain way (like some should scroll with a fixed background and others shouldn't scroll bla bla..) and the divs are nested and positioned in different ways and if i change something it gets messed up and what works in in IE doesn't work...

HTML / CSS

3487

Blog's 2 divs won't center side-by-side.

by: judacris | last post by:

I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing. my blogger blog is functioning well on my site for now, but the blog feed (left) and the sidebar (right) doesn't center here's the css i'm modifying to center it. i apologise for the mess. <html> <head> <title>cris-kun's 'Blog - www.puff-x.com</title> <$BlogMetaData$>

HTML / CSS

1635

Major problems with CSS layouts using DIVs and SPANs

by: Liam Gibbs | last post by:

Hello everyone, This will be my third time posting this, but for some reason, my message isn't get through to the newsgroup, even after hours of waiting. So here goes again. I'm having huge problems with a site I'm creating for a church. I'm trying to use DIVs and SPANs for the layout, not a table, but I'm honestly thinking of just going with the table since it's MUUUCCCCHHH less of a headache. My page can be found at...

HTML / CSS

9673

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9522

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10448

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10217

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10003

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9046

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7544

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5440

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5566

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET