html - Cross Browser Display Issue -

html - Cross Browser Display Issue -

on farther investigation have discovered there in css making navigation display funny -> on innerpage , html below (main page) load fine still beingness driven crazy nav have uploaded total html , css resolve issue,

html:

<div id="container"> <header> <h1>company</h1> <div id="logo"><a href="http://company.co.nz/">home</a></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><a href="#">nav 1</a> <ul><!--sub menu hosting --> <li><a href="#">drop downwards 1</a></li> </ul><!-- sub menu hosting ends --> </li> <li><a href="#">nav 2</a> <ul><!-- sub menu email --> <li><a href="#">i want own email</a></li> </ul><!-- sub menu email ends --> </li> <li><a href="#">nav 3</a> <ul><!-- sub menu back upwards --> <li><a href="#">need support?</a></li> </ul><!-- sub menu back upwards ends --> </li> <li><a href="#">nav 3</a> <ul><!-- sub menu --> <li><a href="#">about</a></li> </ul><!-- sub menu 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 take way above clouds</p> </div> <article id="services"> <section class="service1"> <h2><a href="#">plan 1</a></h2> <p>cloud hosting isn't hard or expensive. onapp lets hosts deploy clouds in day, @ low cost.</p> <p><a href="#" class="bullet">more</a></p> </section> <section class="service2"> <h2><a href="#">plan 2</a></h2> <p>onapp maximizes margins high density, self-organizing clouds , intuitive command panel.</p> <p><a href="#" class="bullet">more</a></p> </section> <section class="service3"> <h2><a href="#">plan 3</a></h2> <p>no more late-night fixes in info center. onapp has automatic failover , multi-layered security. </p> <p><a href="#" class="bullet">more</a></p> </section> <section class="service4"> <h2><a href="#">ms exchange</a></h2> <p>onapp's fine command of permissions, limits , pricing lets tailor client experience.</p> <p><a href="#" class="bullet">more</a></p> </section> <section class="service5"> <h2><a href="#">domains</a></h2> <p>onapp's fine command of permissions, limits , pricing lets tailor client experience.</p> <p><a href="#" class="bullet">more</a></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 { 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 { 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 { 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 { 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 align fine in chrome when open in firefox 5 why?

answer 1:

i have tested on computer in firefox 3.6 , get:

html:

<nav id="mainmenu"> <ul> <li class="first"> <a href="http://domain.co.nz/#">domains</a> <ul> <li class="first"> <a href="http://domain.co.nz/domains/transfer-my-domain">transfer domain</a> </li> <li class="last"> <a href="http://domain.co.nz/domains/get-a-domain-name">get domain name</a> </li> </ul> </li> </ul> <ul> <li class=""> <a href="http://domain.co.nz/#">hosting</a> <ul> <li class="first"> <a href="http://domain.co.nz/hosting/website-hosting">website hosting</a> </li> <li class=""> <a href="http://domain.co.nz/hosting/hosted-crm">hosted crm</a> </li> <li class="last"> <a href="http://domain.co.nz/hosting/transfer-to-hostone">transfer hostone</a> </li> </ul> </li> </ul> <ul> <li class="has_current"> <a href="http://domain.co.nz/#">email</a> <ul> <li class="first"> <a href="http://domain.co.nz/email/personal-e-mail">personal e-mail</a> </li> <li class=""> <a href="http://domain.co.nz/email/business-e">business email</a> </li> <li class="last current"> <a href="http://domain.co.nz/email/microsoft-hosted-exchange">microsoft hosted exchange</a> </li> </ul> </li> </ul> <ul> <li class=""> <a href="http://domain.co.nz/support">support</a> </li> </ul> <ul> <li class="signup last"> <a href="http://domain.co.nz">sign up</a> </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 { 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; }

ok, didn't see seeing, did see bit messed in ff. made changes couple of css statements, , working in chrome , ff. here 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" "float: right;"

#mainmenu .signup { float: right; }

removed "margin-left: 360px;" "#mainmenu .signup a"

#mainmenu .signup { 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 using floats in nav bar want set clear div after closing nav tag clear floats , start new div normally.

<div style="clear: both;">&nbsp;</div>

html css xhtml cross-browser