Image positioning in Mozilla

Hi,
I'm a writer and illustrator who likes hand-coding his pages, and is new to css. My page looks all right in opera and IE, but is a train wreck in Mozilla Firefox. Hope someone is kind enough to help.

This is the link to the page on my test site.

[axess.com...]

None of the links work yet (At this point, I'm just interested in this page looking right). The code is at bottom of this message.

I hope it's just a missing space or comma, and doesn't take a lot of effort to fix.

But now that I've got your attention, there are two other things I'd like to look at on the page. It would be really cool if when you rolled over the items in the menu, the corresponding graphic on the left also changed. Is there a way to do this?

As well, I'd really like it if the 'fridge' graphic loaded first, and the icons appeared on top of that. Is there some way of working the pre-load code to make that happen?

Thanks in advance for your help.

Jack Ruttan, Montreal

<HTML><HEAD>
<TITLE>Jack's Fridge</TITLE>

<!-- Begin

image1 = new Image();
image1.src = "catsa3.gif";

image2 = new Image();
image2.src = "catsa4.gif";

image3 = new Image();
image3.src = "catsa3.gif";

image4 = new Image();
image4.src = "sketch.gif";

image5 = new Image();
image5.src = "sketcha.gif";

image6 = new Image();
image6.src = "comica.gif";

image7 = new Image();
image7.src = "comica1.gif";

image8 = new Image();
image8.src = "port.gif";

image9 = new Image();
image9.src = "porta.gif";

image10 = new Image();
image10.src = "hard.gif";

image11 = new Image();
image11.src = "harda.gif";

image12 = new Image();
image12.src = "elev.gif";

image13 = new Image();
image13.src = "eleva.gif";

image14 = new Image();
image14.src = "punk.gif";

image15 = new Image();
image15.src = "punka.gif";

image16 = new Image();
image16.src = "journal.gif";

image17 = new Image();
image17.src = "journala.gif";

image18 = new Image();
image18.src = "maga.gif";

image19 = new Image();
image19.src = "magb.gif";

image20 = new Image();
image20.src = "link.gif";

image21 = new Image();
image21.src = "linka.gif";

image22 = new Image();
image22.src = "about.gif";

image23 = new Image();
image23.src = "abouta.gif";

image24 = new Image();
image24.src = "collab.gif";

image25 = new Image();
image25.src = "collaba.gif";

// End -->
</script>
<STYLE TYPE="text/css">

a:link {
text-decoration:none;
color:#000000;
}

a:hover {
text-decoration:none;
color:#ff0000
}

a:visited {
text-decoration:none;
color:#99000;
}

#FRIDGE
{
z-index: 1;
position: absolute;
top: 16 px;
left: 236 px;
}
#CATS
{
z-index: 2;
position: absolute;
top: 94 px;
left: 366 px;
}

#SKETCH
{
z-index: 3;
position: absolute;
top: 195 px;
left: 431 px;
}

#PORTF
{
z-index: 10;
position: absolute;
top: 180 px;
left: 245 px;
}

#HARD
{
z-index: 6;
position: absolute;
top: 270 px;
left: 409 px;
}

#STOREY
{
z-index: 7;
position: absolute;
top: 87 px;
left: 246 px;
}

#PUNK
{
z-index: 8;
position: absolute;
top: 357 px;
left: 340 px;
}

#NEWS
{
z-index: 5;
position: absolute;
top: 293 px;
left: 331 px;
}

#MAGA
{
z-index: 9;
position: absolute;
top: 262 px;
left: 256 px;
}

#LINKS
{
z-index: 11;
position: absolute;
top: 350 px;
left: 220 px;
}

#ABOUT
{
z-index: 12;
position: absolute;
top: 82 px;
left: 310 px;
}

#COMICS
{
z-index: 13;
position: absolute;
top: 100 px;
left: 443 px;
}

#COLLAB
{
z-index: 14;
position: absolute;
top: 365 px;
left: 417 px;
}

</STYLE>

</HEAD>
<BODY >

</DIV>

</DIV>

</DIV>

<DIV style="position: absolute; top: 10px; width: 200px; left: 20px; height: 25px; background-color: white"><h1>Jack's Fridge</h1>
<hr>
<P>
Jack's Fridge is covered with all kinds of pictures. Click on some of them to find out about him. <P>

If all this technical wizardry somehow doesn't work, there's a menu below. <hr>
</DIV>

<a href="http://www.richardgagnon.com/jack/ruttannew.htm" onMouseOver="document.about.src='abouta.gif';" onMouseOut="document.about.src='about.gif';">
About Jack</a>
<hr>

<a href="comics.htm" onMouseOver="document.comics.src='comica1.gif';" onMouseOut="document.comics.src='comica.gif';">
Comics
</a>
<hr>

<a href="port3.htm" onMouseOver="document.port.src='porta.gif';" onMouseOut="document.port.src='port.gif';">
Illustration<br>Portfolio</a>
<hr>

House of Cats

</a>
<hr>
<a href="past1.htm" onMouseOver="document.hard.src='harda.gif';" onMouseOut="document.hard.src='hard.gif';">
Stories of<br>
Hardisty, Alberta</a>

<hr>
<a href="store.htm" onMouseOver="document.elev.src='eleva.gif';" onMouseOut="document.elev.src='elev.gif';">
1000 Story<br>
Department Store</a>
<hr>
<a href="sketch1.htm" onMouseOver="document.sketch.src='sketcha.gif';" onMouseOut="document.sketch.src='sketch.gif';">

Jack's Sketchbook</a>
<hr>

<a href="collab.htm" onMouseOver="document.collab.src='collaba.gif';" onMouseOut="document.collab.src='collab.gif';">
Sketch collaborations</a><hr>

<a href="articles.htm" onMouseOver="document.news.src='journala.gif';" onMouseOut="document.news.src='journal.gif';">
News articles by Jack</a><hr>

<a href="articles.htm" onMouseOver="document.mag.src='magb.gif';" onMouseOut="document.mag.src='maga.gif';">
Magazine articles</a>
<hr>
<a href="punk.htm" onMouseOver="document.punk.src='punka.gif';" onMouseOut="document.punk.src='punk.gif';">
Skinny Nameless Punk</a><hr>

<a href="links.htm" onMouseOver="document.link.src='linka.gif';" onMouseOut="document.link.src='link.gif';">
Links

</a>
</DIV>

</BODY>
</HTML>

Image positioning in Mozilla

Newbie quesiton about positioning images in a page

Magellan7

efes

Span

Magellan7

createErrorMsg

Magellan7

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week