aggiungo nuove determinazioni o pseudo tali: allora per una svista non avevo cmq sistemato lo spazio del primo commento. una volta fatto il file su ie11 si visualizza. probabilmente ie9 era piu' tollerante agli errori. quindi ora si visualizza, rimane solo il fatto della formattazione. quella formattazione che ho fatto io tramite div , su ie11 evidentemente non va (vedi i due disegni che ho allegato sopra)
per la visualizzazione:
verifica le misure
applica un DTD alla pagina, visto che ci sei usa html5 (<!DOCTYPE HTML>)
nel caso applica float:left ai contenitori
buongiorno, allora ho inserito la dtd ed il float left, ma il risultato e' invariato. constatato che la mancanza di visualizzazione dipendeva dai commenti chiusi male, rimane il problema del layout. il css e la struttura sono quelli indicati, idem ti allego la visualizzazione, ovvero come gia' nei precedenti disegni, il box invece di essere verticale si estende per tutta la pagina.
codice:<!DOCTYPE html> <!-- commento --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="Bokiv"> <title> menu </title> <style type="text/css"> body, html { margin: 7 auto; text-align: center; border: 7px solid #590709; overflow: hidden; background-color: white; } #blueblock{ width: 180px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; font-size: 90%; background-color: white; color: #333; display: inline; text-align: left; float: left; } * html #blueblock{ /*IE 6 only */ w\idth: 160px; /*Box model bug: 180px minus all left and right paddings for #blueblock */ } #blueblock ul{ list-style: none; margin: 0; padding: 0; border: none; } #blueblock li { border-bottom: 1px solid white; margin: 0; } #blueblock li a{ display: block; /*rimuovendo si ottiene un formato di layout piu' compresso 12.1.2012 */ padding: 5px 5px 5px 8px; border-left: 10px solid #CECECE; border-right: 10px solid #508fc4; background-color: #590709; color: #fff; text-decoration: none; width: 100%; } #blueblock h4{ color: #74002A; background: white; text-align: center; } html>body #blueblock li a{ /*Non IE6 width*/ width: auto; } #blueblock li a:hover{ border-left: 10px solid #757575; border-right: 10px solid #757575; background-color: #2586d7; color: #fff; } span { color: black; font: 11px; font-weight: bold; } #footer { display: inline; margin-bottom: -15px; bottom: 20px; } a:link, a:visited, a:hover, a:active { color: #74002A; } br { color: #FF2874; } </style> </head> <body> <!-- prima linea --> <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> ;  <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> ;  <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> ;  <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <!-- fine prima linea --> <br> <!-- inizio seconda linea --> <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> ;  <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> ;  <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> ;  <div id="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <br>
. non hai aperto l'istanza html
. togli il float left
. sostituisci l'id blueblock con un classe blueblock (gli id devono essere univoci, non possono ripetersi)
. se il br non basta per andare a capo con le righe prova ad applicare in clear:both al primo div di ogni riga
eventuali modifiche te le fai te, vero?
codice:<!DOCTYPE html> <!-- commento --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="Bokiv"> <title> menu </title> <style type="text/css"> html,body { margin: 7 auto; text-align: center; border: 7px solid #590709; /*overflow: hidden;*/ background-color: white; } #container { width:724px; height:1000px; margin:0 auto; padding:0; border:0; } .blueblock{ width: 180px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; font-size: 90%; background-color: white; color: #333; /*display: inline; */ text-align: left; float: left; } .blueblock ul{ list-style: none; margin: 0; padding: 0; border: none; } .blueblock li { border-bottom: 1px solid white; margin: 0; } .blueblock li a{ display: block; /*rimuovendo si ottiene un formato di layout piu' compresso 12.1.2012 */ padding: 5px 5px 5px 8px; border-left: 10px solid #CECECE; border-right: 10px solid #508fc4; background-color: #590709; color: #fff; text-decoration: none; width: 100%; } .blueblock h4{ color: #74002A; background: white; text-align: center; } html>body .blueblock li a{ /*Non IE6 width*/ width: auto; } .blueblock li a:hover{ border-left: 10px solid #757575; border-right: 10px solid #757575; background-color: #2586d7; color: #fff; } span { color: black; font: 11px; font-weight: bold; } #footer { display: inline; margin-bottom: -15px; bottom: 20px; } a:link, a:visited, a:hover, a:active { color: #74002A; } </style> </head> <body> <div id="container"> <!-- prima linea --> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <!-- fine prima linea --> <!-- inizio seconda linea --> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> <div class="blueblock"><h4><a href="" target="_blank">etichetta</a></h4> <ul> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> <li><a href="" target="_blank"><b>link</b></a></li> </ul> </div> </div> </body> </html>
Grazie mille per l'aiuto. Con qualche aggiustamento di dimensioni e qualche ritocco ho risolto. Grazie ancora