position: absolute not working in Firefox

[deusxanime]

I'm creating a website for a client that uses absolute positioning to create a flow chart. It was created by using FrontPage 2003 and a bunch of text file/code editing. I know it is a bit sloppy, but webpage design is far from my first area of expertise, and I know FP can be annoying when it comes to coding. The chart displays fine in IE6, but the text is off when I view it in Firefox 0.9.2 or Mozilla. What am I missing to get it to display correctly in Firefox. I have read that position: absolute is kind of wierd and different between the 2 browsers. Any help?
The page can be viewed at http://www.stpaulengraving.com/ourproc.htm


Thanks.

[Paul O'B]

Hi,

Theres nothing wrong with position:absolute between browsers. It will place the elements exactly according to the correct rules applied.

In your page the elements are placed correctly however you haven't taken into account the default top margins on the p rags that mozilla puts there by default.

Just add this following css to your stylesheet and it will display correctly

p {margin-top:0}

BTW tables and inline styles make your page almost incomprehensible. That page could be reduced in size to about a fifth of the size by removing the inline styles to the stylesheet.

Paul

[deusxanime]

Yep, that worked great. Thanks!

I know the code is sloppy but I only had so much time allocated to the project, and I don't want to have to spend more time cleaning it up when I can't bill for it (in other words, my personal time). They're not worried about it, so I'm not...

[Dalixam]

I have a similar problem and putting margin-top 0 solved the vertical postion, however, the text in my divs are a little further to the left in Firefox than in IE. I don't think this is a margin issue because then the margin should be in the right side, just to be sure I have tried setting all the margins to 0, but it didn't help. Any ideas? CSS posted below.

body {margin-top: 0px;}

#div1 {position:absolute; top: 31px; left: 135px; text-align: left; font-family: verdana; font-size: 10px; font-weight: bold; color: #454545;}

[Paul O'B]

Hi,

The above code is pixel perfect in my ie6 and firefox so it must be something else in your code that is affecting it.

Are you nesting the element in another parent that is statically placed? Have you got a link to the page in question or all the code you are using (& html) as there must be some other reason for the discrepancy.

The code above will place the elements exactly the same in both browsers regardless of margins or padding set on the body because the root is the html element which is the body outside of any margins set. Therefore there must be something else going on in your code

Paul

[Dalixam]

Hi,
Thanks for replying.

You can see the site here . Actually, it's only the menu, the site itself isn't completely done yet. As you can see from the code there are actually five divs all placed on top of each other and the visibility then changes depending on which button you press.

Please no comments on the JavaScript I know it can probably be done in a more efficient way and I plan to look into that later. I'm not that good at JS and right now I'm just happy it works

Anyway, I can't locate the problem. Try pressing one of the buttons in IE and Firefox, the text that appears is further to the left in Firefox.

[Paul O'B]

Hi,

The text is in exactly the same place in both browsers ( as I suspected ).

Its the table above that is in a different position. You have centred the table above therefore it will only be in the same position when browers have their windows opened to exactly the same width. If you maximise windows then this still will not be the same because mozilla doesnt have a default scrollbar space whereas IE does.

This means that at max width at whatever resolution they will be slightly different.

You are placing tour text absolutely in respect to the viewport - have you thught about what happens when someone resizes the window smaller. The text will still stay in the same place but the table above that is centred will move to the left so you will be right out of alignment.

You should place the text in relation to the corner of the table above. One way to do this would be to wrap the whole lot up in a div and give it a position:relative and then place the text absolutely from that element and it will move with the table and always appear at the same location relative to the table above.

e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" >
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE TYPE="text/css">
<!--
#div1, #div2, #div3, #div4, #div5 {position:absolute; top: 31px; left: 10px; text-align: left; visibility:hidden; font-family: verdana; font-size: 10px; font-weight: bold; color: #454545;}
html,body {margin:0;padding:0;text-align:center}
img { border: 0px; }
#outer{
 width:769px;
 position:relative;
 margin:auto;
 text-align:left;
}
-->
</STYLE>
<SCRIPT language="JavaScript" type="text/javascript">
Image1= new Image(72,27)
Image1.src="http://www.worldofmi.com/Sidewalk/me...side_aktiv.gif"
Image2= new Image(72,27)
Image2.src="http://www.worldofmi.com/Sidewalk/menu_profil_aktiv.gif"
Image3= new Image(72,27)
Image3.src="http://www.worldofmi.com/Sidewalk/me...kter_aktiv.gif"
Image4= new Image(72,27)
Image4.src="http://www.worldofmi.com/Sidewalk/menu_priser_aktiv.gif"
Image5= new Image(72,27)
Image5.src="http://www.worldofmi.com/Sidewalk/me...takt_aktiv.gif"
function change1() {
 document.menu_forside.src='http://www.worldofmi.com/Sidewalk/menu_forside_inaktiv.gif';
 document.menu_profil.src='http://www.worldofmi.com/Sidewalk/menu_profil_inaktiv.gif';
 document.menu_produkter.src='http://www.worldofmi.com/Sidewalk/menu_produkter_inaktiv.gif';
 document.menu_priser.src='http://www.worldofmi.com/Sidewalk/menu_priser_inaktiv.gif';
 document.menu_kontakt.src='http://www.worldofmi.com/Sidewalk/menu_kontakt_inaktiv.gif';
 document.menu_forside.src = Image1.src; return true;
}
function change2() {
 document.menu_forside.src='http://www.worldofmi.com/Sidewalk/menu_forside_inaktiv.gif';
 document.menu_profil.src='http://www.worldofmi.com/Sidewalk/menu_profil_inaktiv.gif';
 document.menu_produkter.src='http://www.worldofmi.com/Sidewalk/menu_produkter_inaktiv.gif';
 document.menu_priser.src='http://www.worldofmi.com/Sidewalk/menu_priser_inaktiv.gif';
 document.menu_kontakt.src='http://www.worldofmi.com/Sidewalk/menu_kontakt_inaktiv.gif';
 document.menu_profil.src = Image2.src; return true;
}
function change3() {
 document.menu_forside.src='http://www.worldofmi.com/Sidewalk/menu_forside_inaktiv.gif';
 document.menu_profil.src='http://www.worldofmi.com/Sidewalk/menu_profil_inaktiv.gif';
 document.menu_produkter.src='http://www.worldofmi.com/Sidewalk/menu_produkter_inaktiv.gif';
 document.menu_priser.src='http://www.worldofmi.com/Sidewalk/menu_priser_inaktiv.gif';
 document.menu_kontakt.src='http://www.worldofmi.com/Sidewalk/menu_kontakt_inaktiv.gif';
 document.menu_produkter.src = Image3.src; return true;
}
function change4() {
 document.menu_forside.src='http://www.worldofmi.com/Sidewalk/menu_forside_inaktiv.gif';
 document.menu_profil.src='http://www.worldofmi.com/Sidewalk/menu_profil_inaktiv.gif';
 document.menu_produkter.src='http://www.worldofmi.com/Sidewalk/menu_produkter_inaktiv.gif';
 document.menu_priser.src='http://www.worldofmi.com/Sidewalk/menu_priser_inaktiv.gif';
 document.menu_kontakt.src='http://www.worldofmi.com/Sidewalk/menu_kontakt_inaktiv.gif';
 document.menu_priser.src = Image4.src; return true;
}
function change5() {
 document.menu_forside.src='http://www.worldofmi.com/Sidewalk/menu_forside_inaktiv.gif';
 document.menu_profil.src='http://www.worldofmi.com/Sidewalk/menu_profil_inaktiv.gif';
 document.menu_produkter.src='http://www.worldofmi.com/Sidewalk/menu_produkter_inaktiv.gif';
 document.menu_priser.src='http://www.worldofmi.com/Sidewalk/menu_priser_inaktiv.gif';
 document.menu_kontakt.src='http://www.worldofmi.com/Sidewalk/menu_kontakt_inaktiv.gif';
 document.menu_kontakt.src = Image5.src; return true;
}
function hideAll() {
 for (var i = 1; i <= 5; ++i)
  document.getElementById('div' + i).style.visibility = 'hidden';
}
function show(el_id) {
 hideAll();
 document.getElementById(el_id).style.visibility = 'visible';
}
</SCRIPT>
</HEAD>
<BODY style="margin: 0px;" onLoad="show('div1'); change1();">
<div id="outer">
<div id="div1"></div>
<div id="div2">Stuff goes here</div>
<div id="div3">Stuff goes here</div>
<div id="div4">Stuff goes here</div>
<div id="div5">Stuff goes here</div>
<table width="769" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr> 
	<td width="72" height="27"><a href="#" onClick="show('div1'); change1();"><img src="http://www.worldofmi.com/Sidewalk/me...de_inaktiv.gif" name="menu_forside"></a></td>
	<td width="72" height="27"><a href="#" onClick="show('div2'); change2();"><img src="http://www.worldofmi.com/Sidewalk/me...il_inaktiv.gif" name="menu_profil"></a></td>
	<td width="72" height="27"><a href="#" onClick="show('div3'); change3();"><img src="http://www.worldofmi.com/Sidewalk/me...er_inaktiv.gif" name="menu_produkter"></a></td>
	<td width="72" height="27"><a href="#" onClick="show('div4'); change4();"><img src="http://www.worldofmi.com/Sidewalk/me...er_inaktiv.gif" name="menu_priser"></a></td>
	<td width="72" height="27"><a href="#" onClick="show('div5'); change5();"><img src="http://www.worldofmi.com/Sidewalk/me...kt_inaktiv.gif" name="menu_kontakt"></a></td>
	<td width="409" height="20"><img src="<A href="http://www.worldofmi.com/Sidewalk/sidewalk_under.jpg"></td">http://www.worldofmi.com/Sidewalk/sidewalk_under.jpg"></td>
  </tr>
  <tr> 
	<td width="769" height="22" colspan="6" background="bg.jpg"></td>
  </tr>
</table>
</div>
</BODY>
</HTML>

Hope that helps.

Paul

[Dalixam]

Hi,

Thanks for the explanation and for fixing the page with the corrected code.
It works perfect now, but I guess you knew that

I thought when it was "absolute" that it would look correct in all sizes, but I must admit I hadn't checked that yet. Also, I never thought about the fixed scrollbar in IE could be the cause of this problem. I learned something new today and I'll place text in relation to a table corner in the future

Thanks again!