Positional problems in FF3/netscape/opera

[joelpeyton]

Would somebody kindly take a look at:

www.eden-flowers.co.uk/whites.html

and tell me why in ff3/netscape/opera the "urbangreymenu" and "textareagallery" are not lined up, whereas in IE they are fine.

Here is the CSS:


/*Layout*/

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#logo, #footer{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px; /*Height of logo div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}

#nav{
position: absolute;
top: 100px;
left: 0px;
width: 100%;
height: 25px; /*Height of nav div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}

#footer{
top: auto;
bottom: 0;
height: 30px; /*Height of footer div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}

#maincontent{
position: fixed;
top: 125px; /*Set top value to height of logo and nav Div*/
left: 0;
right: 0;
bottom: 30px; /*Set bottom value to height of footer Div*/
overflow: auto;
background: #B9D15F;
background-image: url("layoutImages/edenbgflip.jpg");
background-repeat: no-repeat;
background-position: bottom right;
}

* html body{ /*IE6 hack*/
padding: 125px 0 30px 0; /*Set value to (height of logo Div 0 height of footer Div 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}


/*Menu*/

#menu {
width:915px;
background:transparent;
padding:0;
}

#menu ul {
list-style:none;
margin:0 0 0 185px;
padding:0;
}

#menu li {
display:inline;
margin:0 2px 0 0;
padding:0;
}

#menu a {
float:left;
display:block;
color:#FFF;
text-decoration:none;
letter-spacing:1px;
background-color:#000;
margin:0 1px 0 0;
padding:5px 10px;
}

#menu a:hover {
background-color:#B9D15F;
}

#menu #current a {
background-color:#B9D15F;
color:#000;
border-bottom:1px solid #B9D15F;
}

#menuline {
top:0px;
left:0px;
width:100%;
height:25px;
background:#000;
}


/*index and contracts page*/

#textarea{
position:absolute;
top:15px;
left:15px;
width:600px;
text-align:justify;
}

#textarea ul {
list-style:none;
margin:0 0 0 10;
}

#textarea li {
padding-top:5px;
}

.photoborder{
border:3px solid #FFF;
}


/*store, weddings and news page*/

#slideshow{
position:absolute;
top:15px;
left:15px;
width:300px;
}

#textarearight{
position:absolute;
top:15px;
left:335px;
width:600px;
text-align:justify;
padding-right:15px;
}


/*gallery pages*/

#textareagallery{
position:absolute;
top:15px;
left:220px;
width:600px;
padding-right:15px;
padding-bottom:15px;
}

.urbangreymenu{
width: 200px; /*width of menu*/
padding-left:15px;
padding-top:15px;
}

.urbangreymenu .headerbar{
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
color: white;
background: #000 url(layoutImages/arrow.png) no-repeat 7px 5px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 2px; /*bottom spacing between header and rest of content*/
padding: 6px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color: black;
background: #b9d15f;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 5px; /*link text is indented 5px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

.img{
border:2px solid white;
}


/*contact page*/

#form {
background-color:#E1E1E1;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

a.contact:link {
text-decoration:none;
color:#000;
}

a.contact:visited {
text-decoration:none;
color:#000;
}

a.contact:hover {
text-decoration:underline;
color:#FFF;
}


/*footer*/

#footertext{
margin: 8px 6px 6px 15px; /*to provide padding*/
font-size: 9px;
}

#footertext a:link,a:visited {
text-decoration:none;
color:#B9D15F;
}

#footertext a:hover {
text-decoration:underline;
color:#FFF;
}


Are there any fixes for something like this?

Thanks in advance

Joel

[Snookerman]

I think this should do it mate, change this:
<h3 class="headerbar">Gallery Menu</h3>
into this:
<div class="headerbar">Gallery Menu</div>
Good luck!

[joelpeyton]

Your a diamond, I'm overlooking the obvious as usual.

thanks again

Joel