Problema spazio vuoto tra menu e testo

mari0

Problema spazio vuoto tra menu e testo

Ciao a tutti, sono nuovo del forum e sto costruendo un semplice sito.
Mi trovo però di fronte a un piccolo problema di visualizzazione che non so risolvere.
Infatti con Firefox e Opera il testo viene visualizzato subito sotto il menu, mentre IE6 (Uso Windows XP) aggiunge tra il menu e il testo uno spazio vuoto che non riesco a capire come toglierlo.
Come posso risolvere?

CSS:

.menu ul {
	margin: 0;
	padding: 0;
	float: left;
    width: 100%;
}
.menu ul li {
	display: inline;
	border-right: 1px solid #333;
	float: left;
}
.menu ul li a {
	margin: 0;
    padding: 0 10px 0 10px;
	text-decoration: none;
	float: left;
}
.text p {
	margin: 0;
	padding: 25px 150px 0 80px;
	font-size: 1.5em;
}

XHTML:

<body>
        <div class="menu">
            <ul>
                <li><a href="index.html" title="Home">HOME</a></li>
                <li><a href="menu1.html" title="Menu1">MENU1</a></li>
                <li><a href="menu2.html" title="Menu2">MENU2</a></li>
                <li><a href="menu3.html" title="Menu3">MENU3</a></li>
                <li><a href="menu4.html" title="Menu4">MENU4</a></li>
            </ul>
        </div>
        <div class="text">
            <p>Text</p>
        </div>
</body>

claudio.c

Ciao,
prova a mettere un <br /> dopo il </div> della classe menu.

karedas

Ciao Mari0 e benvenuto nel forum GT

Se non hai risolto potresti darci una risorsa online per poter controllare direttamente il problema?

gabriele1986

Ciao ho trovato la soluzione al problema devi creare un foglio di stile per IE questo è il codice sorgente:


<style type="text/css">
.menu ul {
    margin-top: 0px;
    padding-top: 0px;
    float: left;
    width: 100%;
}
.menu ul li {
    display: inline;
    border-right: 1px solid #333;
    float: left;
}
.menu ul li a {
    margin: 0;
    padding: 0 10px 0 10px;
    text-decoration: none;
    float: left;
}
.text p {
    margin:0px;
    padding: 0px 150px 0 80px; // il problema era che impostavi a 25  
     font-size: 1.5em;            // px il padding superiore e per questo
}                                     //  vedevi lo spazio bianco
</style>
</head>


<body>
        <div class="menu">
            <ul>
                <li><a href="index.html" title="Home">HOME</a></li>
                <li><a href="menu1.html" title="Menu1">MENU1</a></li>
                <li><a href="menu2.html" title="Menu2">MENU2</a></li>
                <li><a href="menu3.html" title="Menu3">MENU3</a></li>
                <li><a href="menu4.html" title="Menu4">MENU4</a></li>
            </ul>
        </div>
        <div class="text">
            <p>Text</p>
        </div>

</body>
</html>

Il css ad-hoc per ie lo crei così:


<!--[if IE 6]>
Link al foglio css per ie
<![endif]-->