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>Creative Kays Jewelry</TITLE>
<LINK rel="stylesheet " href="styles.cs s" type="text/css">
<META http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<STYLE type="text/css">
..bordercolorim g{
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="JavaS cript" type="text/JavaScript">
<!--
function MM_swapImgResto re() { //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_preloadImage s() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.leng th,a=MM_preload Images.argument s; 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&&paren t.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.fo rms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.l ayers&&i<d.laye rs.length;i++)
x=MM_findObj(n, d.layers[i].document);
if(!x && d.getElementByI d) x=d.getElementB yId(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_sw apImage.argumen ts; document.MM_sr= new Array;
for(i=0;i<(a.le ngth-2);i+=3)
if ((x=MM_findObj( a[i]))!=null){docum ent.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">&n bsp;</TD>
<TD width="150" height="140" align="center"
background="ima ges/menubg_top.gif" > </TD>
<TD width="10" height="140">&n bsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nb sp;</TD>
<TD width="150" height="50" align="center"
background="ima ges/menubg_about.gi f"><A href="about.htm l"
onMouseOut="MM_ swapImgRestore( )"
onMouseOver="MM _swapImage('Men u1','','images/menu_about_on.g if',1)"><IMG
src="images/menu_about.gif" name="Menu1" width="140" height="20"
border="0"></A></TD>
<TD width="10" height="50">&nb sp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nb sp;</TD>
<TD width="150" height="50" align="center"
background="ima ges/menubg_neck.gif "><A href="necklaces .html"
onMouseOut="MM_ swapImgRestore( )"
onMouseOver="MM _swapImage('Men u2','','images/menu_neck_on.gi f',1)"><IMG
src="images/menu_neck.gif" name="Menu2" width="75" height="20"
border="0"></A></TD>
<TD width="10" height="50">&nb sp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nb sp;</TD>
<TD width="150" height="50" align="center"
background="ima ges/menubg_brace.gi f"><A href="bracelets .html"
onMouseOut="MM_ swapImgRestore( )"
onMouseOver="MM _swapImage('Men u3','','images/menu_brace_on.g if',1)"><IMG
src="images/menu_brace.gif" name="Menu3" width="70" height="20"
border="0"></A></TD>
<TD width="10" height="50">&nb sp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nb sp;</TD>
<TD width="150" height="50" align="center"
background="ima ges/menubg_ear.gif" ><A href="earrings. html"
onMouseOut="MM_ swapImgRestore( )"
onMouseOver="MM _swapImage('Men u4','','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">&nb sp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nb sp;</TD>
<TD width="150" height="50" align="center"
background="ima ges/menubg_shows.gi f"><A href="upcomings hows.html"
onMouseOut="MM_ swapImgRestore( )"
onMouseOver="MM _swapImage('Men u5','','images/menu_shows_on.g if',1)"><IMG
src="images/menu_shows.gif" name="Menu5" width="125" height="20"
border="0"></A></TD>
<TD width="10" height="50">&nb sp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nb sp;</TD>
<TD width="150" height="50" align="center"
background="ima ges/menubg_gal.gif" ><A href="gallery.h tml"
onMouseOut="MM_ swapImgRestore( )"
onMouseOver="MM _swapImage('Men u6','','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">&nb sp;</TD>
</TR>
<TR>
<TD width="10" height="145">&n bsp;</TD>
<TD width="150" height="145" align="center"
background="ima ges/menubg_bot.gif" > </TD>
<TD width="10" height="145">&n bsp;</TD>
</TR>
<TR>
<TD colspan="3">&nb sp;</TD>
</TR>
</TABLE></TD>
<TD width="610" valign="top">
<TABLE width="610" border="0" cellspacing="0" cellpadding="0" >
<TR>
<TD colspan="3">&nb sp;</TD>
</TR>
<TR>
<TD width="20">&nbs p;</TD>
<TD width="570" align="left"><A href="index.htm l"><IMG
src="images/logo_75.jpg" width="346" height="110" border="0"></A></TD>
<TD width="20">&nbs p;</TD>
</TR>
<TR>
<TD height="30" colspan="3">&nb sp;</TD>
</TR>
</TABLE>
<!-- MAIN PAGE TABLE INFORMATION -->
<TABLE width="610" border="1" cellpadding="0" cellspacing="0"
background="ima ges/bubbles.gif">
<TR>
<TD width="20" height="400">&n bsp;</TD>
<TD width="560" height="400" align="center" id="container" >
<DIV id="topimg"><IM G src="images/home_top.jpg" width="200"
height="150" class="borderco lorimg"></DIV>
<DIV id="bottomimg"> <IMG src="images/home_bot.jpg" width="200"
height="150" class="borderco lorimg"></DIV>
<DIV id="leftimg"><I MG src="images/home_left.jpg" width="200"
height="150" class="borderco lorimg"></DIV>
<DIV id="rightimg">< IMG src="images/home_right.jpg" width="200"
height="150" class="borderco lorimg"></DIV></TD>
<TD width="30" height="400">&n bsp;</TD>
</TR>
<TR>
<TD colspan="3" height="40">&nb sp;</TD>
</TR>
<TR>
<TD colspan="3" align="center" class="copyrigh t"><A
href="index.htm l" class="cr">Home </A| <A href='#'
onClick="window .open('contact. html','Contact' ,'menubar=yes,s crollbars=yes,r esizable=yes,wi dth=300,height= 200');return
false;" class="cr">Cont act</A| <A href='#'
onClick="window .open('policy.h tml','Policy',' menubar=yes,scr ollbars=yes,res izable=yes,widt h=500,height=40 0');return
false;" class="cr">Poli cy</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