Cross Browser Display Issue?

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.

Up vote 0 down vote favorite share g+ share fb share tw.

Nav 3 About SIGN UP Cloud Hosting Hosting to take you way above the clouds Plan 1 Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost. More Plan 2 OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.

More Plan 3 No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. More MS Exchange OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.

More Domains OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience. More Services: © 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: Domains Transfer my Domain Get A Domain Name Hosting Website Hosting Hosted CRM Transfer to HostOne Email Personal E-Mail Business Email Microsoft Hosted Exchange Support SIGN UP 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; } html css xhtml cross-browser link|improve this question edited Jul 14 '11 at 5:00 asked Jul 9 '11 at 22:11Jess McKenzie656118 78% accept rate.

It will just help identify what ul and li is what. – Aaron Ray Jul 10 '11 at 3:55 Aaron, See above have updated question – Jess McKenzie Jul 10 '11 at 21:02.

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.

Thanks Aaron I have implemented your changes but it is still the same in firefox have cleared cache – Jess McKenzie Jul 10 '11 at 5:52 I wonder if one of your add-ons is causing the problem. Try opening a barebones Firefox instance using the FF profile manager and see if you still see the issue: kb.mozillazine.org/Profile_manager – Aaron Ray Jul 10 '11 at 14:16 Does this display correctly for you? Jsfiddle.net/DN3dR/1 – Aaron Ray Jul 11 '11 at 3:56 Looks fine in both browsers but li dropdown is to wide :) – Jess McKenzie Jul 11 '11 at 21:21 It always had that slight overlap so I thought it was by design.

Here is the updated version: jsfiddle.net/DN3dR/4 – Aaron Ray Jul 11 '11 at 21:34.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.