Menu Link che spesso si disallinea dalla nav bar

[danielepalmas88]

Salve a tutti, innanzitutto spero di non aver sbagliato sezione, e in tal caso chiedo anticipatamente scusa ai mod.

Utilizzo wordpress, con un tema mio personalizzato.

Nel file style.css ho definito correttamente le coordinate per far sì che i link testuali del menu principale (i vari HOME e via dicendo) siano perfettamente accentrati ed allineati alla navbar.

Ma ho notato che per non so quale motivo, almeno un 30% delle volte che apro il mio blog, a prescindere da sistema operativo, browser o risoluzione, tali menu compaiono disallineati dalla navbar, e per far sì che si riallineino ho bisogno di refreshare la pagina più volte.

E' dovuto a qualche presumibile errore nel file css o potrebbe esserci dell'altro?

Vi ringrazio anticipatamente per ogni eventuale suggerimento

/*-------------------- General --------------------*/


body { margin: 0; padding: 0; background: url("images/designxabc.png") repeat-x #d2eefc; font: 10px Verdana, Arial, Trebuchet, Sans-Serif; color: #000; text-align: left; line-height: 190%; }


h1, h2, h3, h4, h5, h6 { margin: 0; font-style: normal; font-weight: normal; background: transparent; color: black; }

h1 { font-size: 2.2em; }
h2 { font: 1.9em Georgia, Trebuchet, Sans-Serif; }
h3, h4, h5, h6 { font-size: 1em; }

a, a:link { color: #004a80; text-decoration: none; }
a:visited { text-decoration: none; }
a:hover, a:active { color: #004a80; text-decoration: underline; }

blockquote { margin: 10px; padding: 0px 0px 10px 50px; background: url(images/blockquote.gif) no-repeat left top; }
code{ display:block; overflow:auto; text-align:left; margin: 10px 0 10px 0; padding: 5px 10px 5px 10px; }

small { font-size: 0.8em; }

img { padding:5px; border:0; }
img.right { float: right; margin:5px 0 5px 5px; }
img.left { float: left; margin:5px 5px 5px 0; }
a img {border:none;}

.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.alignleft { float: left; margin-right: 10px; }
.alignright { float: right; margin-left: 10px; }

.navigation { display:block; padding: 20px; }


/*-------------------- Layout --------------------*/


#outline { width: 975px; margin: 0 auto; padding: 0; background: #fff; font-size: 1.3em; }

#wrapper { float: left; background: #fff url(images/bg.jpg) repeat-y 0 0; width: 977px; margin: 0 !important; margin: -15px 0 0 0; /* IE hack */ padding: 0; }


/*-------------------- Header --------------------*/


#header { width: 977px; height: 196px; background: #252525 url(images/header.jpg) no-repeat left top; }
#header .blogtitle { width: auto; height: 118px; }
#header h1 { padding: 95px 0 0 77px; font-size: 64px; }
#header h1 a { color: #0077ab; text-decoration: none; }
span.description { color: black; padding: 15px 0 0 110px; float: left; font-size: 21px; }

#navbar { clear: both; float: left; width: 977px; height: 58px; background: url(images/nav.jpg) no-repeat 0 0; }

ul.menu { float: left; margin: 0; padding: 15 10px; list-style-type: none; font-size: 25px; }
ul.menu li { float: left; }
ul.menu li a { float: left; display: block; height: 28px; padding: 1px 21px 0 2px; line-height: 25px; color: #fff; }
ul.menu li a:link, ul.menu li a:visited { color: #ccc; }
ul.menu li a:hover, ul.menu li a:active { color: #fff; }

ul.menu li.current_page_item a:link,
ul.menu li.current_page_item a:visited,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_item a:active { color: #fff; text-decoration: none; font-weight: bold; } 

[KillerWorm]

Ciao, c'è un errore sul css; puoi verificarlo con un validatore, ad esempio questo o questo.

ul.menu { float: left; margin: 0; padding: 15 10px; list-style-type: none; font-size: 25px; }

Quel valore 15 su padding deve essere provvisto di unità di misura.

Non ho idea se correggendo quell'errore si risolva il problema; non vedendo il codice html a cui è applicato quel css, è impossibile constatarne il funzionamento e tanto meno fornirti ulteriori suggerimenti.

[danielepalmas88]

Grazie mille, era proprio quello che causava il glitch. ^_^