problema navbar: le scritte si allineano 4 volte su 5

[Daniele Ferrante]

Buongiorno, perdonatemi se esistono già altre pagine dedicate a questo argomento, ma sono un principiante e temo che non sarei capace di adattare i rimedi degli altri thread al mio problema. Senza contare che attualmente non ho il tempo per dedicarmi anima e corpo al ripensamento del codice css della mia pagina.

Comunque, è da un anno che sto impazzendo sul mio sito, quando viene aperto con chrome o con safari a volte invece che ordinare le scritte in orizzontale le ordina in verticale, poi è sufficiente aggiornare e tutto torna alla normalità.
Qui è il sito http://www.danieleferrante.com (per avere più probabilità che si presenti il bug chiudete chrome, riapritelo e avviate il sito)

Qui è tutto il codice css principale

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../../fonts/League_Gothic-webfont.eot');
    src: url('../../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         local('League_Gothic-webfont'), local('League_Gothic-webfont'), url('../../fonts/League_Gothic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-stretch: expanded;

}

body {
	display:block;
	padding: 0;
	border: 0;
	margin:0;
	font-family:"MS Gothic", "LeagueGothicRegular";
	font-size:12px;
}

.center_box {margin:0 auto;}

#navigation {
position:fixed;
top: 0;
width: 100%;
color: #ffffff;
border: 0px;
border-spacing: 0px;
height: 25px;
text-align:center;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
display:table-cell;
vertical-align:middle;
text-align:center;
height:25px;
text-align:middle;
font-size: 25px;
padding-top:0px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover, a:visited {
background-color:grey;
} 

div {
    font-size: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    border: 15px;
}

#piede {
position: fixed;
bottom: 0;
width: 100%;
color: #ffffff;
height: 21px;
text-align: center;
padding-bottom: 2px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#piede a {
display:inline;
width:100px;
height:20px;
text-align:middle;
font-size: 25px;
padding-left: 1px;
padding-right: 1px;
color: white;
text-decoration: none;
}

#piede a:hover {
background-color:grey;
} 

.title
{
    font-size: 40px;
    text-align: left;
}
 
.subtitle
{
    font-size: 20px;
    text-align: center;
	font-weight:100;
	font-style:bold;
	
}

.subtitle2
{
    font-size: 20px;
    text-align: left;
	font-weight:100;
	font-style:bold;
	
}
 
#container
{
    position: relative;
    width: 960px;
    margin: 30px auto 0px auto;
}

.button
{
    display:table-cell;
	vertical-align:middle;
	width:90px;
	height:21px;
	font-size: 25px;
	padding-left: 10px;
	padding-right: 10px;
	color: white;
	text-decoration: none;
	border:none;
	background-color:#141414;
	font-family:"MS Gothic", "LeagueGothicRegular";
}

.button:hover
{
	background-color:grey;
	
}	

#menu {
position:fixed;
top:25px;
color: #ffffff solid;
border: 0px;
border-spacing: 0px;
width:90px;
height: 21px;
text-align: center;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#menu a {
display:table-cell;
	vertical-align:middle;
width:90px;
height:21px;
font-size: 25px;
padding-left: 10px;
padding-right: 10px;
color: white;
text-decoration: none;
}

#menu a:hover, a:visited {
background-color:grey;
} 

.here{
background-color:grey;
}

Ringrazio chiunque dovesse aiutarmi
Ciao!

 

[Daniele Ferrante]

Informazioni aggiuntive

Per scritte intendo solo quelle della barra di navigazione superiore, ecco uno screenshot

 

[criric]

Ciao,secondo me ti conviene cambiare la struttura html del menu ed usare una lista <ul>

<style>
    ul {
        margin: 0;
        padding:0;
        list-style-type: none;
    }
    ul li {
        float:left;
        margin:0 5px;
    }
    ul li a {
        text-decoration: none;
        color: white;
    }
</style>
<ul>
    <li><a href="index.html"><img border="0" src="loghino.gif"/></a></li>
    <li><a href="pag/about.html">ABOUT</a></li>
    <li><a href="pag/portfolio.html">PORTFOLIO</a></li>
    <li><a href="pag/contact.html">CONTACT</a></li>
    <li><a href="pag/links.html">LINKS</a></li>
</ul>

fai prima che a sistemare il css

 

[Daniele Ferrante]

Ciao,secondo me ti conviene cambiare la struttura html del menu ed usare una lista <ul>

<style>
    ul {
        margin: 0;
        padding:0;
        list-style-type: none;
    }
    ul li {
        float:left;
        margin:0 5px;
    }
    ul li a {
        text-decoration: none;
        color: white;
    }
</style>
<ul>
    <li><a href="index.html"><img border="0" src="loghino.gif"/></a></li>
    <li><a href="pag/about.html">ABOUT</a></li>
    <li><a href="pag/portfolio.html">PORTFOLIO</a></li>
    <li><a href="pag/contact.html">CONTACT</a></li>
    <li><a href="pag/links.html">LINKS</a></li>
</ul>

fai prima che a sistemare il css

Si, ho provato adesso... è che io vorrei mantenere la barra scura in alto e le caratteristiche di trasparenza quando c'è lo scroll...

 

[criric]

il css che ho postato è minimale, giusto per dargli l'rientamento orizzontale, devi aggiungere la tua formattazione

 

[Daniele Ferrante]

ah! Allora adesso provo

 

[Daniele Ferrante]

Perfetto! Va! Grazie mille