Q:

CSS left, position and floating ...Different result in multiple browsers

left, position and floating. Different result in multiple browsers. What's hapenning in here? Thanks in advance!
Image here CSSProblem
Here is the Index.css with the header values
            #static_header { background: url('white_grid_bg.png') repeat scroll 0% 0% transparent; height: 80px; border-top: 1px solid rgb(201, 208, 214); width:100%; position: relative; }
            #static_header .link_wrapper { width: 960px; padding: 0px 10px; margin: auto; }
            #static_header .link_wrapper a { float: right; position: relative; text-transform: uppercase; }

            #static_header .link_wrapper img { float: right; position: relative; top: 26px; /*padding-right: -154px;*/  padding-left:15px;border-left: 1px dotted black;z-index:8;  width: 11%; }
            #static_header .link_wrapper .txtlink { top: 30px; margin-right: 20px; font-family: helvetica,arial,sans-serif; font-size: 12px; font-weight: bold; color: rgb(105, 113, 126); text-decoration: none; padding: 1px 0px; }
            #static_header .link_wrapper a.txtlink:hover, #static_header .link_wrapper a.txtlink.active { color: rgb(17, 68, 132); border-bottom: 2px solid rgb(50, 142, 236); }
            #static_header .link_wrapper #header_logo { float: left; background: url('aspelogo6.png') no-repeat scroll 0% 0% transparent; height: 90px; width:90px; top: 3px; position: relative; z-index: 400;  left: 0px; margin-left: -98px;display:block; width:10%; }

Here is the HTML code for Navigation
        <!-- Navigation Panel -->
        <div class="container">

            <div >  
              <ul id="nav">
                <li class="current"><a href="#" title="Home" >Home</a></li>
                <li><a href="http://www.freshdesignweb.com/" >Catalogs</a></li>
                <li><a href="http://www.freshdesignweb.com/" >Products</a></li>
                <li><a href="http://www.freshdesignweb.com/" >About Us</a></li>
                <li><a href="http://www.freshdesignweb.com/" >Contact</a></li>
              </ul>
            </div>  
        </div>

Here is the Navigation stylesheet
            /*  NAVIGATION Buttons*/
            #nav { top: -1091px; padding-top: 0.85em; width: 50%;font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; position:relative; z-index:118;  float:right; right: 290px;  }
            #nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; background:#d18b5e; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;}
            #nav li:last-child { margin-right: 0; }
            #nav a { display: block; color: #FFF; text-decoration:none; }
            #nav a:hover { color: #484a50; border-bottom-color: #484a50; }

A:

Try adding position:relative to the container div for the navigation and then position:absolute; the navigation.
The float:right; and position:relative; are not playing nice.

