View Full Version : IE layout issue with menu bar

Apr 13th, 2009, 11:11 PM
I am having issues with IE not rendering my horizontal menu bar with rollovers correctly. The rollovers work but one of the menu items is throwing the whole bar out of alinement in IE. The link image is pushed up slightly causing it to be out of line with the others and creating unwanted space between the header and menu bar. I think it is because I have a different javascript attached to this particular menu item for opening a fixed width window. Can some one help me get to the bottom of this as I am not extremely familiar with javascript and it's affect on layout especially in IE as I use a mac.
Thanks for any input!

you can see the home page at http://www.stantonglass.com/index.html

My code for the first three menu items is:

<td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','images/navBar/navbar-rollover_01.gif',1)" onmouseover="MM_nbGroup('over','home','images/navBar/navbar-rollover_01.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBar/navBar-rollover_01.gif" alt="Home" name="home" width="78" height="41" border="0" id="home" onload="" /></a></td>
<td><a href="aboutus.html" target="_top" onclick="MM_nbGroup('down','group1','aboutus','images/navBar/navbar-rollover_02.gif',1)" onmouseover="MM_nbGroup('over','aboutus','images/navBar/navbar-rollover_02.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBar/navBar_02.gif" alt="About Us" name="aboutus" width="100" height="41" border="0" id="aboutus" onload="" /></a></td>

<td><a href="galleries/stanton-glass-portfolio.swf" target="_blank" onclick="MM_openBrWindow('galleries/stanton-glass-portfolio.swf','StantonGlassGallery','width=900,height=800');return false;MM_nbGroup('down','group1','portfolio','',1)" onmouseover="MM_nbGroup('over','portfolio','images/navBar/navbar-rollover_03.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/navBar/navBar_03.gif" alt="Photo Gallery" name="portfolio" width="95" height="41" border="0" id="portfolio" onload="" />

The javascript is:

<script 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_openBrWindow(theURL,winName,features) { //v2.0
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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }

Apr 14th, 2009, 03:11 PM
Do you know why tables for layout is very bad (http://www.hotdesign.com/seybold/)? Make your markup semantic by replacing that tables used for your menu with an unordered list. Take a look at some CSS based menus at http://www.cssplay.co.uk/menus/