Question

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; }

Answer 1

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.