Problema con la largheza in IE8

[Jeremy78]

Salve a tutti

Sto facendo un sito per la mia ragazza ma ho trovato un problema nell'eseguirlo in IE8, vi spiego il problema:

Il sito e largo 960 px, ho posizionato un menu largo 940, ad ogni voce del menu (ogni link) gli ho impostato un padding di 17px, tutto questo funziona in FF3 e Chrome ma se vado in IE8 l'ultima voce del menu mi va a capo.

Ho provato a vedere in giro se esiste un Hack per questo problema ma non ho trovato nulla.
Potete darmi un aiutino?

Grazie e a presto.

[Jeremy78]

Nessuno mi puo dare un aiutino ?

Dai che non riesco a trovare nulla....

Grazie

[Mich_]

Se vuoi aiuto devi spiegarti meglio, specificando codice HTML, CSS e DTD. Altrimenti sono solo parole al vento.


Comunque la mia sfera di cristallo mi dice che probabilmente sei incappato nel "vecchio" problema del box-model di IE 5.

Usa una DTD strict (ad esempio XHTML 1.0 Strict) e dovrebbe risolversi.

[Jeremy78]

Hai raggione,qui di seguito vi lascio il codice html e Css (DTD non so che cosa è )

HTML :

<div id="wrapper">
        <div id="main">
            <div id="header">
                <div id="logo"><h1>[img]images/logo.gif[/img]</h1></div>
                <div id="verde">[img]images/verde.gif[/img]</div>
                <ul class="menuservice">[*]Dove Siamo[*]Trasparenza[*]Contatti[*]Job[*]Login[/list]
                <div id="reset"></div>
                <ul class="menu">
                    <li class="primo">Cessione del quinto[*]Prestito delega[*]Prestito vitalizio[*]Prestito personale[*]mutui
                    <li class="ultimo">assicurazioni[/list]
                <div id="reset"></div>
            </div>

CSS:

 

/* Box model */
#reset{clear:both;}
#content {padding-top:20px;}
#wrapper{margin:0 auto; width:960px; padding-top:30px;  }
#main {padding:10px; background:#FFF url(images/bck-top.gif) top no-repeat;}
#logo{float:left;}
#verde{ float:right;}
#slide {float:left;}

l.menuservice{float:right; width:100%; margin-bottom:20px;}
ul.menuservice li {float:right;}
ul.menuservice li a {text-decoration:none; display:block; padding:5px; color:#e21e26;}
ul.menuservice li a:hover {text-decoration:underline;}
ul.menu li {float:left}
ul.menu li a {display:block; text-transform:uppercase; text-decoration:none; color:#fff; padding:10px 17px; background:#ce0101 url(images/bck-menu.gif) repeat-x top; font-size:110%; border-right:1px solid #da170f;}
ul.menu li.ultimo a {border-left:none 0; padding-left:27px;}
ul.menu li a:hover { background:#fe3d27 url(images/bck-menu_hover.gif) repeat-x top;}

Fatemi sapere voi che ne dite.
Saluti a tutti.

[Jeremy78]

Ma proprio nessuno sa aiutarmi !!!!

Dai dai dai

Grazie

[Mich_]

La DTD (document type definition) viene settata nel pseudotag <!DOCTYPE>.
Cerca il capitolo relativo sul tuo manuale HTML preferito (o vedi quello di HTML.it).

Per le sintassi possibili vedi i manuali reference (ad esempio http://www.w3schools.com/tags/tag_doctype.asp )

[Jeremy78]

non è una questione di DTD,li ho cambiati tutti e il problema rimane....

E' un problema di larghezza del menu, dove FF lo interpreta benissimo,mentre IE8 mi sfora di 10 px e constringe l'ultima voce del menu a spostarsi a capo.

Datemi un alternativa.

Se volete vi allego anche il sito.

[goat]

Ho agito solo sul le parti in verde, e mi sembra che il menù vada a posto:

ul.menu {list-style:none;padding:0px; }
ul.menu li {float:left}
ul.menu li a {display:block; text-transform:uppercase; text-decoration:none; color:#fff; padding:10px 17px; background:#ce0101 url(images/bck-menu.gif) repeat-x top; font-size:90%; border-right:1px solid #da170f;}
ul.menu li.ultimo a {border-left:none 0; padding-left:27px;}
ul.menu li a:hover { background:#fe3d27 url(images/bck-menu_hover.gif) repeat-x top;}

[Jeremy78]

Allora cosi come hai detto tu funziona, ho dovuto modificare :

ul.menu li.ultimo a {border-left:none 0;  padding-left:28px;}
ul.menu li a {display:block; text-transform:uppercase; text-decoration:none; color:#fff; padding:10px 25px; background:#ce0101 url(images/bck-menu.gif) repeat-x top; font-size:90%; border-right:1px solid #da170f;}

Cosi funziona.
Grazie e a presto