hello guys,
Right last problem with this pesky statement function and I have a working (100%) cross browser compatible & w3c validated page - ohh it's getting exciting.
the problem is the java/css menu icons don't align correctly, they look fine in IE but not in FF or Opera.
please see
the old nested table vesrion displayed correctly in all three browsers so i have to assume it's something to do with all the nice new div's i'm using, but no doubt you will correct me if i'm wrong.
the JS used to update this menu has the following offset for the icon positioning.
the two 'Y' offsets are the ones in question, to get it to display correctly in FF or Opera i set them to 0 , for i.e. they need to be 5 & 4, but as said before set to 5 & 4 on the old page works fine in I.E, FF & Opera.
here is the HTML
regards,
1DMF
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
Right last problem with this pesky statement function and I have a working (100%) cross browser compatible & w3c validated page - ohh it's getting exciting.
the problem is the java/css menu icons don't align correctly, they look fine in IE but not in FF or Opera.
please see
the old nested table vesrion displayed correctly in all three browsers so i have to assume it's something to do with all the nice new div's i'm using, but no doubt you will correct me if i'm wrong.
the JS used to update this menu has the following offset for the icon positioning.
Code:
this.main_expand_image = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_main_arrow.gif';[/URL]
this.main_expand_image_hover = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_main_arrow.gif';[/URL]
this.main_expand_image_width = '7';
this.main_expand_image_height = '5';
this.main_expand_image_offx = '0';
this.main_expand_image_offy = '5';
this.sub_expand_image = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_sub_arrow.gif';[/URL]
this.sub_expand_image_hover = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_sub_arrow.gif';[/URL]
this.sub_expand_image_width = '5';
this.sub_expand_image_height = '7';
this.sub_expand_image_offx = '0';
this.sub_expand_image_offy = '4';the two 'Y' offsets are the ones in question, to get it to display correctly in FF or Opera i set them to 0 , for i.e. they need to be 5 & 4, but as said before set to 5 & 4 on the old page works fine in I.E, FF & Opera.
here is the HTML
Code:
<!-- Main Content -->
<body onload="<tmpl_var NAME='onload'>">
<table><tr><td valign="top" align="center">
<div id="leftside">
<div id="menu">
<div class="titlecell">Select Statement</div>
<table width="100%"><tr><td align="center">
<div><div><div style="display:none;">
<ul id="imenus0" style="width:100px;">
<!--tmpl_loop name="month"-->
<li style="width:95px;"><a style="text-decoration:none;"><!--tmpl_var name='month'--></a><div><div style="width:65px;top:-18px;left:80px;"><ul style="">
<!--tmpl_loop name="year"-->
<li><a><!--tmpl_var name='year'--></a><div><div style="width:140px;top:-18px;left:50px;"><ul style="">
<!--tmpl_loop name="stat"-->
<li><a onclick="getAjax('url','vars')">Period Ending <!--tmpl_var name='period'--></a></li>
<!--/tmpl_loop-->
</ul></div></div></li>
<!--/tmpl_loop-->
</ul></div></div></li>
<!--/tmpl_loop-->
</ul>
</div></div></div>
</td></tr></table>
</div>
<div id="printButton">
To print statement use the button below.<br />
<img src="<tmpl_var name='url_to_domain'>/images/printstat1.png" id="printit" onmouseover="document.getElementById('printit').src='<tmpl_var name='url_to_domain'>/images/printstat2.png'" onmouseout="document.getElementById('printit').src='<tmpl_var name='url_to_domain'>/images/printstat1.png'" title="Print Current Statement" onclick='print();' alt="Print Statement" style="cursor:pointer" />
</div>
<div id="instructionstable">
<table id="instructions" style="border:none;">
<tr>
<td valign="middle">
Use the menu above to navigate your commission statements.<br /><br />The menu will only show an option if a statement is available.<br /><br />Your latest statement is displayed by default.
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
<div id="rightside">
<div id="CurStat"><!--tmpl_var name="cstat"--></div>
<div id="statement">No statements available!</div>
</div>
</td></tr></table>
<script type="text/javascript" src="<tmpl_var name='url_to_domain'>/scripts/draw_menu.js"></script>
</body>regards,
1DMF
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
![[rofl2]](/data/assets/smilies/rofl2.gif "[rofl2] [rofl2]")