Cross Browser Display Issue - html

Question

On further investigation I have discovered that there is something in my CSS that is making my navigation display funny -> Everything on my innerPage and HTML below (Main Page) load fine but I am still being driven crazy by the nav so I have uploaded my full html and css to resolve this issue,
HTML:
<div id="container">
<header>
<h1>company</h1>
<div id="logo">Home</div>
<section id="sales">
<p></p>
</section>
<section id="searchBox">
<form id="searchBoxForm">
<fieldset>
<input type="text" name="search" id="search" placeholder="Search Here" />
<input class="submit" type="submit" name="submit" id="submit" value="Search" />
</fieldset>
</form>
</section>
</header><!-- Header End -->
<nav id="mainMenu">
<ul>
<li>Nav 1
<ul><!--Sub Menu Hosting -->
<li>Drop Down 1</li>
</ul><!-- Sub Menu Hosting Ends -->
</li>
<li>Nav 2
<ul><!-- Sub Menu Email -->
<li>I want my own email</li>
</ul><!-- Sub Menu Email Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu Support -->
<li>Need Support?</li>
</ul><!-- Sub Menu Support Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu About -->
<li>About</li>
</ul><!-- Sub Menu About Ends -->
</li>
<li><a class="signup" href="#">SIGN UP</a></li>
</ul>
</nav><!-- Main Menu End -->
<div id="billboard">
<h1 contenteditable="true">Cloud Hosting </h1>
<p>Hosting to take you way above the clouds</p>
</div>
<article id="services">
<section class="service1">
<h2>Plan 1</h2>
<p>Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost.</p>
<p>More</p>
</section>
<section class="service2">
<h2>Plan 2</h2>
<p>OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.</p>
<p>More</p>
</section>
<section class="service3">
<h2>Plan 3</h2>
<p>No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. </p>
<p>More</p>
</section>
<section class="service4">
<h2>MS Exchange</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
<section class="service5">
<h2>Domains</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
</article><!-- Services End -->
<div id="servicesBanner">
<p>Services: </p>
</div>
<ul id="nav-footer">
<div id="col">
</div>
<p>&copy</p>
</div> <!-- container -->
</body>
</html>
CSS:
body {
line-height:1;
font:12px normal helvetica,arial,sans-serif;
color:gray;
background:url(includes/images/body-bg.png) 0 0 repeat-x #efefef;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:none;
}
h1 {
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#58585a;
font-weight:700;
}
h2 {
padding-bottom:9px;
border-bottom:1px solid #e5e5e5;
font-size:18px;
line-height:30px;
color:#58585a;
font-weight:700;
margin:40px 0 10px;
}
h3 {
margin-bottom:3px;
font-size:14px;
line-height:20px;
color:#58585a;
font-weight:700;
}
h4 {
font-size:12px;
font-weight:700;
color:#58585a;
line-height:20px;
}
ol {
list-style:decimal;
margin:0 0 20px 16px;
}
strong {
color:#4a4a4a;
}
.subheading {
margin-bottom:40px;
font-size:16px;
line-height:24px;
}
h1.small {
font-size:26px;
line-height:36px;
}
#container {
width:960px;
margin:0 auto;
padding:0 0 40px;
}
pre {
border-left:2px solid #00afd8;
background:url(/assets/img/pre-bg.png);
font-size:12px;
line-height:20px;
width:620px;
overflow:auto;
overflow-y:hidden;
margin:0;
padding:0;
}
code {
display:block;
margin:0 0 0 10px;
}
header{
z-index:100;
margin-bottom:-30px;
width:100%;
height:100px;
}
header h1{
font-family: 'Springsteel Lig', arial, serif;
}
h1#logo,#logo a {
display:block;
left:0;
top:30px;
text-indent:-99999px;
width:193px;
height:41px;
margin:0;
}
/* Main Menu */
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu .signup:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:115px;
top:50px;
right:-37px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:152px;
height:30px;
font-weight:bold;
margin-left:-38px;
line-height:35px;
}
footer{
clear:both;
border-top: 1px solid #d3d3d3;
width:100%;
height:50px;
}
#sales {
width:160px;
height:30px;
float:right;
margin-top:-140px;
margin-right:215px;
}
/*Sales */
#sales p{
font-weight:bold;
text-align:center;
line-height:45px;
}
/*Search Bpx */
#searchBox{
float:right;
margin-top:-125px;
}
#searchBoxForm{
margin-top:10px;
}
#searchBoxForm .search {
font-size: 11px;
color: #fff;
padding: 6px;
border: 1px solid #b8b8b8;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit {
background-color:#00afd8;
width: 67px;
height: 26px;
border: none;
color: #fff;
cursor: pointer;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit:hover,
#searchBoxForm .submit.hover {
background-color:#00afd8;
}
/* Billboard */
#billboard {
min-height:240px;
background:#00afd8;
font-size:16px;
line-height:24px;
color:#fff;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
padding:34px 520px 60px 40px;
}
#billboard h1 {
font-family:arial;
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#fff;
}
#billboard a {
color:#fff;
text-decoration:underline;
}
#services {
background-color:#fff;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
}
#services a{
text-decoration:none;
}
#services h2 {
position:relative;
border:0;
background:url(/assets/img/sections/home/services-icons.png) 0 0 no-repeat;
margin:-40px 0 3px;
padding:0;
}
#services h2 a {
display:block;
color:#58585a;
padding:94px 0 0;
}
#services .service1 {
padding-left:20px;
border-left:0;
}
#services .service2 h2 {
background-position:-168px 0;
}
#services .service3 h2 {
background-position:-336px 0;
}
#services .service4 h2 {
background-position:-504px 0;
}
#services .service5 h2 {
background-position:-672px 0;
}
#services .service1,.service2,.service3,.service4,.service5{
float:left;
background-color:#fff;
border-left:1px solid #e5e5e5;
width:154px;
height:100%;
padding:0 18px 0 19px;
margin-bottom:10px;
}
#services img{
height:100px;
width:100px;
margin:0 auto;
}
#servicesBanner{
clear:both;
width:100%;
height:90px;
margin:15px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#servicesBanner p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Nav Content */
.subNavHeading{
color:#fff;
padding-top:10px;
margin:9px 0 15px 45px;
}
/*Inner Page CSS */
#innerPageLeftCol{
float:right;
width:220px;
min-height:100%;
margin:-10px 0 10px 0;
}
#innerPageContent{
background-color:#fff;
float:left;
width:720px;
min-height:100%;
margin-bottom:10px;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne{
background:url(../images/sidebarBox.png) no-repeat;
width:220px;
height:100%;
min-height:100%;
margin:10px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne li{
margin:5px 0 0 0;
padding-top:5px;
}
.boxOne a{
text-decoration: none;
color:#00afd8;
}
.boxTwo{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxThree{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 5px 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
#innerPageContent h1{
margin:30px;
}
#innerPageContent .innerPageSubHeading{
display:block;
font-size:16px;
margin:30px;
width:450px;
}
#innerPage .separator{
margin-top:20px;
padding-top:20px;
}
#innerPageContent p{
margin:30px;
}
#innerPageContent img{
float:right;
width:175px;
height:175px;
margin:30px;
padding:3px;
}
/*Packages Template */
#packageContainer{
width:320px;
list-style:none;
font-size:14px;
color:#000;
margin:0 auto;
}
#packageContainer .leftCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .leftCol li{
height:15px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
#packageContainer .rightCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .rightCol li{
height:15px;
text-indent:8px;
border-bottom:1px solid #ccc;
}
#packageContainer .orderButton{
float:left;
margin:0px 20px 20px 65px;
background:#00afd8;
font-family:Helvetica,arial,sans-serif;
font-size:12px;
color:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 5px;
}
#innerPageProducts{
clear:both;
width:100%;
height:90px;
margin:10px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#innerPageProducts p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Footer */
#nav-footer{
margin: 20px 0 0 0;
padding: 20px 0 20px 20px;
border-top: 1px solid lightGrey;
list-style: none;
font-size: 11px;
}
#nav-footer #col{
margin: 0 auto;
display:inline-block;
width:215px;
}
#nav-footer li{
margin:10px 0 0 -10px;
text-align:left;
}
#nav-footer li a{
text-decoration:none;
}
#nav-footer ul{
list-style:none;
}
#nav-footer .first{
text-decoration:none;
font-weight:bold;
padding-left:30px;
}
My menu seems to align fine in Chrome but when I open it in Firefox 5 I get why?
Answer 1:
I have tested on another computer in firefox 3.6 and get:
HTML:
<nav id="mainMenu">
<ul>
<li class="first">
Domains
<ul>
<li class="first">
Transfer my Domain
</li>
<li class="last">
Get A Domain Name
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Hosting
<ul>
<li class="first">
Website Hosting
</li>
<li class="">
Hosted CRM
</li>
<li class="last">
Transfer to HostOne
</li>
</ul>
</li>
</ul>
<ul>
<li class="has_current">
Email
<ul>
<li class="first">
Personal E-Mail
</li>
<li class="">
Business Email
</li>
<li class="last current">
Microsoft Hosted Exchange
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Support
</li>
</ul>
<ul>
<li class="signup last">
SIGN UP
</li>
</ul>
</nav><!-- Main Menu End -->
CSS:
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup a{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu li .signup a:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:135px;
top:50px;
right:-55px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:170px;
height:30px;
font-weight:bold;
margin-left:-35px;
line-height:35px;
}

Answer 1

OK, I didn't see exactly what you were seeing, but I did see that it was a bit messed up in FF. I made some changes to a couple of your CSS statements, and it was working in Chrome and FF. Here is what I did:
Changed "#mainMenu ul li" removed "display: inline;" added "float: left; list-style: none;"
#mainMenu ul li
{
margin-left:0px;
width:120px;
height:56px;
position:relative;
float: left;
list-style: none;
}
Added "#mainMenu .signup" with a "float: right;"
#mainMenu .signup
{
float: right;
}
Removed "margin-left: 360px;" from "#mainMenu .signup a"
#mainMenu .signup a
{
background-color:#69c21c;
height:50px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
Now since I am using floats in your nav bar you will probably want to put a clear div after the closing nav tag to clear the floats and start a new div normally.
<div style="clear: both;"> </div>