By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,650 Members | 1,785 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,650 IT Pros & Developers. It's quick & easy.

Absolute Positioning within Table Cell Alignment Problem in FireFox (Mozilla)

P: n/a
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">&nbsp;</TD>
<TD width="150" height="140" align="center"
background="images/menubg_top.gif">&nbsp;</TD>
<TD width="10" height="140">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="50">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD width="10" height="145">&nbsp;</TD>
<TD width="150" height="145" align="center"
background="images/menubg_bot.gif">&nbsp;</TD>
<TD width="10" height="145">&nbsp;</TD>
</TR>
<TR>
<TD colspan="3">&nbsp;</TD>
</TR>
</TABLE></TD>
<TD width="610" valign="top">
<TABLE width="610" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="3">&nbsp;</TD>
</TR>
<TR>
<TD width="20">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD height="30" colspan="3">&nbsp;</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">&nbsp;</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">&nbsp;</TD>
</TR>
<TR>
<TD colspan="3" height="40">&nbsp;</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 &copy; 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

Nov 21 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ni********@yahoo.com wrote:
>
I have just started messing with absolute positioning on webpages,
"mess" is probably the right word, though not in the way you originally
intended. ;) Absolute positioning tends to make a mess of things if you
don't fully understand how it works and the consequences thereof.
www.creativekaysjewelry.com

The images overlap exactly how I wanted and in the right position
within the table cell...
This illustrates my point, I think.
The only problem is that it works on every
other browser except FireFox... What am I doing wrong?
The problem is not with Firefox, but your illogical usage of positioning
in the first place. It doesn't make sense to absolutely position a table
cell, does it?

If you are going to use positioning, please take the time to learn what
each method really does, and be prepared to deal with the consequences.
Get a good understanding of the box model while you are at it. IOW,
learn the technology you are attempting to use. If you're up to the
challenge, go read the specs at http://www.w3.org/TR/CSS21/visuren.html

That aside, a better way to get the results you want is to put all in
images into a relatively positioned container, then they can be
absolutely positioned within it. You don't need to put each image into a
div, either. Using your existing ids, it might be coded as

<td><div id="container">
<img... id="leftimg">
....
</div></td>

#container would be position:relative, but otherwise pretty much what
you already have for style rules.

BTW, it would be wise to start abandoning table layouts to begin with.
That particular subject has been done ad nauseam in these groups, so
search the google archives for more info on that.
http://groups.google.com/advanced_search

--
Berg
Nov 21 '06 #2

P: n/a
Bergamot wrote:
"mess" is probably the right word, though not in the way you originally
intended. ;) Absolute positioning tends to make a mess of things if you
don't fully understand how it works and the consequences thereof.
Haha! I actually do get the concept of relative and absolute, but it
got confusing when trying to apply it within tags, and understanding
what relative and absolute truly meant within each realm...
The problem is not with Firefox, but your illogical usage of positioning
in the first place. It doesn't make sense to absolutely position a table
cell, does it?
Very true... that's where I was getting confused. It actually just took
you telling me this to realize how dumb that sounds... It's all making
sense now...
That aside, a better way to get the results you want is to put all in
images into a relatively positioned container, then they can be
absolutely positioned within it. You don't need to put each image into a
div, either. Using your existing ids, it might be coded as

<td><div id="container">
<img... id="leftimg">
...
</div></td>

#container would be position:relative, but otherwise pretty much what
you already have for style rules.
It worked! I made the changes and "messed around" with some other
attributes as well. I really just needed to step away from the problem,
get a little help, and now it makes more sense. Thanks again for the
help Berg!

Nino

Dec 5 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.