[Solved] IE vs. Mozilla div placement

[Luxlusis]

Hello.

I am having an issue with div placement. The problem is that I can not get the menu to sit where it’s intended in Mozilla. IE 8 looks fine and seems to work well. This menu seems to ignore the parent div and I do not understand why. The div works, as I stuck some basic text in it and the text shows up where I want it to. Any assistance/advice is appreciated. Thank you.

Please view the test page in IE and then in Mozilla: http://digitalwebfx.com/layout/test1.html

Here are 2 screen shots of what is happening:
IE
[img]http://digitalwebfx.com/layout/ie.jpg[/img]

Mozilla
[img]http://digitalwebfx.com/layout/mozilla.jpg[/img]

HTML:

Code:

Logo

Menu

Site text copy

Footer

CSS: (the broken images aren’t important)

Code:

body {
color: #000;
background-color: #e6e6e6;
background-image: url(images/main-bg.jpg);
background-position: top left;
background-repeat: repeat-x;
font-size: 11px;
line-height: 14px;
font-family: verdana, arial;
text-align: left;
margin: 0px;
padding: 0px;
}

#container {
position: relative;
margin: 0 auto;
width: 940px;
}

#contents {
position: absolute;
top: 135px;
width: 940px;
background: #FFFFFF;
text-align:left;
}

#top {
width: 940px;
height: 102px;
}

#logo {
position: absolute;
background: #000 url(images/top-left.jpg) no-repeat;
top: 0px;
left: 0px;
width: 399px;
height: 102px;
}

#contents-text {
color: #000;
text-align:left;
padding: 20px;
min-height: 300px;
}

#bottom {
color: #fff;
width: 940px;
height: 102px;
background: #000;
min-height: 300px;
text-align:left;
}

#menu {
position: absolute;
top: 104px;
}

a.regbutton:link,a.regbutton:visited {

float: left;

font: bold 11px “Verdana”, Arial, Helvetica, sans-serif;

color: #FFF;

text-align: center;

text-decoration: none;

background: #000 url(“images/menu-items/bg.jpg”) repeat-x center left;

width: 186px;

padding: 10px 0px 9px 2px;

margin-right: 28px;

}

a.regbutton:hover {

float: left;

font: bold 11px “Verdana”, Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

text-decoration: none;

background: #fff url(“images/menu-items/bg-over.jpg”) repeat-x center left;

width: 186px;

padding: 10px 0px 9px 2px;

margin-right: 28px;

}

a.activebutton:link,a.activebutton:visited {

float: left;

font: bold 11px “Verdana”, Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

text-decoration: none;

background: #fff url(“images/menu-items/bgactive.jpg”) repeat-x center left;

width: 186px;

padding: 10px 0px 9px 2px;

margin-right: 28px;

}

a.activebutton:hover {

float: left;

font: bold 11px “Verdana”, Arial, Helvetica, sans-serif;

color: #620001;

text-align: center;

text-decoration: none;

background: #fff url(“images/menu-items/bgactive.jpg”) repeat-x center left;

width: 186px;

padding: 10px 0px 9px 2px;

margin-right: 28px;

}

h1 {

clear: left;

}

SCRIPT:

Code:

// JavaScript Document

function Menu(menuTexts,menuLinks){

if(arguments.length!=2||!menuTexts.length||!menuLinks.length){return;}

for(var i=0;i

This script is based from a tutorial by Alejandro Gervasio – http://www.devarticles.com/c/a/JavaScript/Building-a-Dynamic-Menu-with-CSS-and-JavaScript-part-1/. Again, Thanks for any help.

[Luxlusis]

TT_Mark,

Thank you. Your recommendation has solved my problem. I am trying to learn and understand javascript and I assumed that this issue was in that js, but I would not have discovered this on my own at this point. Again, thank you.

[Author]

Posts