Hello,
I have just started messing with absolute positioning on webpages, and
it definitely let's you do some creative things. Well, after much
searching and help, I got the images I was using to overlap correctly.
You can see it on this page:
www.creativekaysjewelry.com
The images overlap exactly how I wanted and in the right position
within the table cell... The only problem is that it works on every
other browser except FireFox... What am I doing wrong? You can view all
the code by viewing the page source, but here it is anyways:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>CreativeKays Jewelry</TITLE>
<LINK rel="stylesheet" href="styles.css" type="text/css">
<META http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<STYLE type="text/css">
..bordercolorimg{
border-width : 2px;
border-style : solid;
border-color : #CCCCCC;
}
td#container {
display: block;
position: absolute;
width: 560px;
height: 400px;
text-align: center;
}
#leftimg {
position: absolute;
top: 123px;
left: 0px;
}
#rightimg {
position: absolute;
top: 123px;
right: 0px;
}
#topimg {
position: absolute;
top: 0px;
left: 178px;
}
#bottomimg {
position: absolute;
bottom: 0px;
left: 178px;
}
</STYLE>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</HEAD>
<BODY>
<DIV align="center">
<TABLE width="780" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="170" valign="top">
<TABLE width="170" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="10" height="140"> </TD>
<TD width="150" height="140" align="center"
background="images/menubg_top.gif"> </TD>
<TD width="10" height="140"> </TD>
</TR>
<TR>
<TD width="10" height="50"> </TD>
<TD width="150" height="50" align="center"
background="images/menubg_about.gif"><A href="about.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu1','','images/menu_about_on.gif',1)"><IMG
src="images/menu_about.gif" name="Menu1" width="140" height="20"
border="0"></A></TD>
<TD width="10" height="50"> </TD>
</TR>
<TR>
<TD width="10" height="50"> </TD>
<TD width="150" height="50" align="center"
background="images/menubg_neck.gif"><A href="necklaces.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu2','','images/menu_neck_on.gif',1)"><IMG
src="images/menu_neck.gif" name="Menu2" width="75" height="20"
border="0"></A></TD>
<TD width="10" height="50"> </TD>
</TR>
<TR>
<TD width="10" height="50"> </TD>
<TD width="150" height="50" align="center"
background="images/menubg_brace.gif"><A href="bracelets.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu3','','images/menu_brace_on.gif',1)"><IMG
src="images/menu_brace.gif" name="Menu3" width="70" height="20"
border="0"></A></TD>
<TD width="10" height="50"> </TD>
</TR>
<TR>
<TD width="10" height="50"> </TD>
<TD width="150" height="50" align="center"
background="images/menubg_ear.gif"><A href="earrings.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu4','','images/menu_ear_on.gif',1)"><IMG
src="images/menu_ear.gif" name="Menu4" width="65" height="20"
border="0"></A></TD>
<TD width="10" height="50"> </TD>
</TR>
<TR>
<TD width="10" height="50"> </TD>
<TD width="150" height="50" align="center"
background="images/menubg_shows.gif"><A href="upcomingshows.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu5','','images/menu_shows_on.gif',1)"><IMG
src="images/menu_shows.gif" name="Menu5" width="125" height="20"
border="0"></A></TD>
<TD width="10" height="50"> </TD>
</TR>
<TR>
<TD width="10" height="50"> </TD>
<TD width="150" height="50" align="center"
background="images/menubg_gal.gif"><A href="gallery.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu6','','images/menu_gal_on.gif',1)"><IMG
src="images/menu_gal.gif" name="Menu6" width="60" height="20"
border="0"></A></TD>
<TD width="10" height="50"> </TD>
</TR>
<TR>
<TD width="10" height="145"> </TD>
<TD width="150" height="145" align="center"
background="images/menubg_bot.gif"> </TD>
<TD width="10" height="145"> </TD>
</TR>
<TR>
<TD colspan="3"> </TD>
</TR>
</TABLE></TD>
<TD width="610" valign="top">
<TABLE width="610" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="3"> </TD>
</TR>
<TR>
<TD width="20"> </TD>
<TD width="570" align="left"><A href="index.html"><IMG
src="images/logo_75.jpg" width="346" height="110" border="0"></A></TD>
<TD width="20"> </TD>
</TR>
<TR>
<TD height="30" colspan="3"> </TD>
</TR>
</TABLE>
<!-- MAIN PAGE TABLE INFORMATION -->
<TABLE width="610" border="1" cellpadding="0" cellspacing="0"
background="images/bubbles.gif">
<TR>
<TD width="20" height="400"> </TD>
<TD width="560" height="400" align="center" id="container">
<DIV id="topimg"><IMG src="images/home_top.jpg" width="200"
height="150" class="bordercolorimg"></DIV>
<DIV id="bottomimg"><IMG src="images/home_bot.jpg" width="200"
height="150" class="bordercolorimg"></DIV>
<DIV id="leftimg"><IMG src="images/home_left.jpg" width="200"
height="150" class="bordercolorimg"></DIV>
<DIV id="rightimg"><IMG src="images/home_right.jpg" width="200"
height="150" class="bordercolorimg"></DIV></TD>
<TD width="30" height="400"> </TD>
</TR>
<TR>
<TD colspan="3" height="40"> </TD>
</TR>
<TR>
<TD colspan="3" align="center" class="copyright"><A
href="index.html" class="cr">Home</A| <A href='#'
onClick="window.open('contact.html','Contact','men ubar=yes,scrollbars=yes,resizable=yes,width=300,he ight=200');return
false;" class="cr">Contact</A| <A href='#'
onClick="window.open('policy.html','Policy','menub ar=yes,scrollbars=yes,resizable=yes,width=500,heig ht=400');return
false;" class="cr">Policy</A| Copyright © 2006 CREATIVEKAYS
JEWELRY. All Rights Reserved.</TD>
</TR>
</TABLE>
<!-- END MAIN PAGE TABLE INFORMATION -->
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
Thanks for any help...
Nino Skilj