Barre de nav

Pb marges sous safari OK sous chrome et FF NSP pour IE

by Laetiparis

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js&quot;"></script>
<body>


<div id="wrapper"> 
	
 
<div id="main"> 
<div class="bandeau">

<ul id="navigation">
	
			<li> <a href="#" id="blindLeftToggle"></a> </li>
			
			<li>
				<div class="outer">
		    		<div class="box">
						<ul id="menu">
							<li><a href="#propos">A PROPOS</a></li>
							<li><a href="#workinprogress">REALISATIONS</a> </li>
							<li><a href="#photo">PHOTOGRAPHIE</a></li>
							<li><a href="http://lae.tumblr.com/" target="_blank">BLOG</a></li>
							<li><a href="#contact">CONTACT</a></li>
						</ul>
		    		</div>
				</div>
			</li>
		</ul>	<!-- FIN de barre de nav --> 
</div>	

</div> <!-- FIN DE MAIN -->

</div> <!-- FIN DE WRAPPER -->

CSS

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size: 0.9em;
	width: 100%; 
	margin: 0 auto;  
    background-color: blue;
}

#wrapper {
	width: 100%;
	min-width: 960px; 
	margin: 0 auto;
}

#main {
	max-width: 1024px;
	min-width: 960px;   /*du coup les iframe de INSPI ne flottent pas */
	margin: 0 auto; 
	
}

/* BARRE DE NAV */

.area {
    min-height: 180px;

}

.bandeau {
	width: 100%;	
	background-color:white;
	/* opacity: 0.7; A ENLEVER*/
	position: fixed;
	top: 0;
	left: 0; 
	z-index: 100;
}

#navigation {
	width: 960px; 
	margin: auto;
	border: 0px solid blue;
	margin-top: 0;

}

#navigation ul {
	/* height: 45px;  NEW*/
	max-width: 1024px;
	/*min-width: 960px;  */
	border: 0px solid red;
	padding-left: 10px; 
	margin: 0 auto;
}

#navigation li {
	display: inline-block;
	border:0px solid black;
	padding-bottom: 0px; 
	font-size: 1.2em;
	/* height: 45px;*/

}

#navigation li:first-child{
	padding-left: 20px;  /* 24 */
} 

#menu li{
	padding-right: 35px; /* vs 40px */
	padding-bottom: 15px; /* NEW */

}

#menu li:first-child{
	padding-left: 20px; /* NEW */
}

#navigation li:last-child {
	margin-right: 10px; 
} 

#navigation a {
	color: gray;

}

#navigation li:nth-child(1) a:hover {color: #F9B013;}
                       
#navigation li:nth-child(3) a:hover{color:#798CC6;}

#navigation li:nth-child(4) a:hover{color: #FBD3B0;}

#navigation li:nth-child(5) a:hover {color: #F9B013;}
 
#navigation li a {
	/*padding-right: 4%; */
	border:0px solid blue;
	text-decoration: none;
	text-align: center;
}

#navigation li a:hover{
	color:#EB0999;
}

/*
#logo {
	width: 80px; 
	height:45px;
}
*/

#blindLeftToggle {
	background: url('http://placekitten.com/80/45') 2px 1px no-repeat; 
	width: 80px; 
	height:45px; 
	border:0;
	display:block; 
	margin:0px 0px 0 0; 
	margin-top: 10px; /* NEW */
	padding-bottom: 5px; /* NEw */
}

#blindLeftToggle:visited {border: 0; border-width:0;}
#blindLeftToggle:focus{
	outline: none; /* affichage FF */
}

.outer {
    overflow:...

JavaScript

/*!
 * jquery.custom-animations.js 0.1
 * https://github.com/yckart/jquery-custom-animations
 *
 *
 * Copyright (c) 2012 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/02/08
**/


/*!
 * @param {number} times - The number of fades
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
**/
jQuery.fn.flash = function (times, duration, easing, complete) {
    times = (times || 2) * 2;
    while(times--){
        this.animate({
            opacity: !(times % 2)
        }, duration, easing, complete);
    }
    return this;
};



/*!
 * @param {number} times - The number of shakes
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
**/
jQuery.fn.wiggle = function (times, duration, easing, complete) {
    var self = this;

    if (times > 0) {
        this.animate({
            marginLeft: times-- % 2 === 0 ? -15 : 15
        }, duration, easing, function () {
            self.wiggle(times, duration, easing, complete);
        });
    } else {
        this.animate({
            marginLeft: 0
        }, duration, easing, function () {
            if (jQuery.isFunction(complete)) {
                complete();
            }
        });
    }
    return this;
};



/*!
 * @param {number} duration - The speed amount
 * @param {string} easing - The easing method
 * @param {function} complete - A callback function
**/
jQuery.fn.zap = function (duration, easing, complete) {
    return this.css({
        overflow: 'hidden'
    }).animate({
        padding: 'toggle',
        width: 'toggle',
        height: 'toggle',
        margin: this.outerHeight() / 2 === parseFloat(this.css('marginTop')) || this.outerWidth() / 2 === parseFloat(this.css('marginLeft')) ? 0 : this.outerHeight() / 2 + ' ' + this.outerWidth() / 2
   ...