Help - Search - Members - Calendar
Full Version: Nav Bar not in line on Firefox / Sarfari
Forums > Resource Center > Webmasters' Corner
webonline
Click to view attachmentClick to view attachment
alwynsloan


newbie


Posts: 1
Joined: 2008-07-14
Posted: Tue, 2008-07-15 09:14

Hi,

I have a background image, which contains a horizontal bar about 422px for the top margin, I'm trying to line up the navigation bar with the horizontal bar from the background, but in firefox / sarfari it won't line up, whereas on IE it will, I've attached the appropriate screen shots from both IE and Firefox.


I've used the Nav Bar function in Dreamweaver CS3 to create the Nav bar and the respective rollover images.

It's driving me mad, so any help would be appreciated, I'm sure it's something silly I'm not doing.. so any help would be appreciated. Thx.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fire.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
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;
} }
}
//-->
</script>
</head>
<body onload="MM_preloadImages('../../../Web Design/DunsanyLodgeNew/images/mainnavb script:;" target="_top" onclick="MM_nbGroup('down','group1','mainnavb script:;" target="_top" onclick="MM_nbGroup('down','group1','mainnavb script:;" target="_top" onclick="MM_nbGroup('down','group1','mainnavb script:;" target="_top" onclick="MM_nbGroup('down','group1','mainnavb script:;" target="_top" onclick="MM_nbGroup('down','group1','mainnavb script:;" target="_top" onclick="MM_nbGroup('down','group1','mainnavbar06','',1)" onmouseover="MM_nbGroup('over','mainnavbar06','../../../Web Design/DunsanyLodgeNew/images/mainnavbarhover_06.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../../../Web Design/DunsanyLodgeNew/images/mainnavbar_06.gif" alt="" name="mainnavbar06" width="130" height="51" border="0" id="mainnavbar06" onload="" /></a></td>
</tr>
</table> </div>
</body>
</html>



CODE

body{
background-image:url(../../../Web%20Design/DunsanyLodgeNew/images/newbg.gif);

}

#nav{
width: 780px;
margin-bottom:0px;
margin: 422px auto 0 auto;

}
fixtatik
internet explorer treats padding differently than firefox (firefox is correct--it'll look off in safari and opera, too).

lining up something with a body background probably isn't the best way to go about it. if someone increases the text size, it'll be off no matter way you do if you keep it as the background. instead, make the navigation bar 100% of the body width, and simply give it a background color the same as the bar on the background.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.