Spazio di troppo

[paola.mi]

Spazio di troppo

Scusate il titolo ma non mi veniva altro...

Dunque, vi allego un'immagine per mostrarvi quello che mi succede.
In breve: la linea verdina che vedete tra il testo e il menù delimita la fine (è il border-right) del div di sinistra.
Quello che non riesco a capire (ci sbatto la testa da ieri) è perché nel div del menù, prima dei testi, mi viene tutto quello spazio bianco.

Vi posto il css e l'xhtml:

CSS:

body {

background:#004e00;

font: 90% Verdana, Arial, Helvetica, sans-serif;

color: #000000;

margin:auto;

}

#dim_car {

text-align: right;

font: 90% Verdana, Arial, Helvetica, sans-serif;

color: #fefecc;

margin-top: -108px;

}

a.dim_car {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

a.dim_car:visited {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

a.dim_car:active {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

a.dim_car:hover {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

#contenitore {

margin: auto;

text-align: justify;

border-left: 10px solid #009900;

border-right: 10px solid;

background: #fff;

font: 90% Verdana, Arial, Helvetica, sans-serif;

color:;

}

#colonna-sx {

float: left;

width: 69%;

border-right: 1px dotted;

}

#menu {

float: right;

width: 30%;

background-color:;

text-align: left;

font: normal 85% Verdana, Arial,sans-serif;

color: #000;

margin: auto;

padding: 10px 0px 10px 0px;

}

ul.menu {

list-style-type: none;

margin: 0px;

}

li.menu {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-align: left;

}

.menu a {

display: block;

padding-left: 10%;

background-color: #FFF;

background-image: url(immagini/menu3.gif);

background-repeat: no-repeat;

background-position: 0 55%;

border-bottom: 1px dotted;

padding-top: 1.5%;

padding-bottom: 1.5%;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

}

.menu a:link, .menu a:visited {

text-decoration: none;

}

.menu a:hover {

background-image: url(immagini/menu4.gif);

color:;

}

#logo {

background-image: url(immagini/sfondo_header2.jpg);

background-repeat: repeat-x;

height: 105px; /* strange but ie6 needs this */

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}

#header {

margin: 0px 0px 0px 0px;

padding:30px 0px 0px 10px;

}

img {

border: none;

}

.clean {clear: both;}

h1 {

font: bold 150% Verdana, Arial, Helvetica, sans-serif;

color:;

padding: 10px 10px 0 10px;

}

hr {

float: left;

width: 50%;

height: 1px;

color: #1c5276;

padding: 0 0 0 0;

margin-bottom: 10px;

margin-left: 10px;

}

p {

margin-top: 0px;

margin-bottom: 10px;

padding: 10px 15px 0 10px;

}

a.testo {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: underline;

}

a.testo:visited {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: underline;

}

a.testo:active {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: underline;

}

a.testo:hover {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

#footer{

width: 100%;

text-align: center;

font: 80% Verdana, Arial, Helvetica, sans-serif;

color:;

background:;

padding: 5px 0 5px 0;

margin-top: 15px;

}

.validazioni {

width: 100%;

text-align: center;

margin-top: 15px;

}

ul.colsx {

list-style-type: none;

margin: 0px;

padding-left: 20px;

padding-top: 10px;

}

li.colsx {

line-height: 1em;

background-image: url(immagini/freccia.gif);

background-repeat: no-repeat; padding-left: 1.6em;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-align: left;

}

ul.spunta {

list-style-type: none;

margin: 0px;

padding: 10px 10px 0 10px;

}

li.spunta {

line-height: 1em;

background-image: url(immagini/spunta.gif);

background-repeat: no-repeat; background-position: 0em 0em; padding-left: 1.6em;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

}

.titolo {

font: bold 100% Verdana, Arial, Helvetica, sans-serif;

color:;

margin-bottom: 15px;

padding: 20px 10px 0 10px;

}

ol.acces {

margin: 0px;

padding: 0 5px 0 10px;

}

li.acces {

line-height: 1em;

background-image: none;

margin-left: 20px;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

}

p.acces {

margin-top: 0px;

margin-bottom: 5px;

}

p.acces0 {

margin-top: 0px;

margin-bottom:5px;

}

a.acces {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

a.acces:visited {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

a.acces:active {

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: none;

}

a.acces:hover {

font: bold 100% Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

background:;

text-decoration: none;

}

.portimmag {

float: left;

width: 25%;

margin-top: 15px;

margin-left: 8px;

margin-bottom: 10px;

}

.porttex {

float: right;

width: 45%;

margin-bottom: 15px;

}

p.portfolio0 {

margin: 0px;

}

p.portfolio2 {

font: bold 100% Verdana, Arial, Helvetica, sans-serif;

color:;

text-decoration: underline;

margin-top: 0px;

margin-bottom:5px;

padding: 10px 10px 0 10px;

}

ul.portfolio {

list-style-type: none;

margin: 0px;

padding: 0 0 0 0;

}

li.portfolio {

line-height: 1em;

background-image: none;

margin: 0px;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

}

.tit_dichiarazione {

font: bold 100% Verdana, Arial, Helvetica, sans-serif;

color:;

padding: 20px 10px 0 10px;

}

p.dichiarazione {

margin-top: 0px;

margin-bottom: 10px;

padding: 10px 10px 0 10px;

}

ol.dichiarazione {

list-style-type: lower-alpha;

margin: 0px;

padding: 0 10px 0 30px;

}

li.dichiarazione {

line-height: 1em;

background-image: none;

margin: 0px;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

}

ul.dichiarazione2 {

list-style-type: decimal;

margin: 5px 0 0 0;

padding: 0 10px 0 70px;

}

li.dichiarazione2 {

line-height: 1em;

background-image: none;

margin: 0px;

font: 100% Verdana, Arial, Helvetica, sans-serif;

color:;

}

Xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
<head>
<title>Paola Augusti - Freelance Web Designer</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Paola Augusti" />
<meta name="Keywords" content="studio, grafico, milano, freelance, webdesign, costruzione siti, siti, biglietti da visita, agenzia, grafica, assistenza, tecnica, virus, assemblaggio, vendita, pc, collegamenti, internet, adsl" />
<meta name="Description" content="Studio Grafico, Freelance Webdesigner" />
<meta name="robots" content="all" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://www.paolaaugusti.com/favicon.ico" />
</head>
<body>
<div id="contenitore">
<div id="logo">
<div id="header">
<img src="immagini/logo.jpg" alt="logo" />
</div>
<div id="dim_car">
<p><a class="dim_car" href="index2.php" title="Passa alla versione ad alto contrasto">Versione ad alto contrasto</a>
</p>
</div>
</div>
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="index.php" title="Torna alla Homepage" accesskey="0"><span>Home (0)</span></a></li>
<li class="menu"><a class="menu" href="servizi.php" title="I Servizi offerti" accesskey="1"><span>Servizi (1)</span></a></li>
<li class="menu"><a class="menu" href="accessibilita.php" title="Il Web accessibile a tutti" accesskey="2"><span>Accessibilità (2)</span></a></li>
<li class="menu"><a class="menu" href="assistenza.php" title="Assistenza Tecnica" accesskey="3"><span>Assistenza (3)</span></a></li>
<li class="menu"><a class="menu" href="portfolio.php" title="Portfolio Clienti" accesskey="4"><span>Portfolio (4)</span></a></li>
<li class="menu"><a class="menu" href="accesskey.php" title="Navigare con la tastiera" accesskey="5"><span>Accesskey (5)</span></a></li>
<li class="menu"><a class="menu" href="contatti.php" title="Per contattare lo Studio" accesskey="6"><span>Contatti (6)</span></a></li>
<li class="menu"><a class="menu" href="dimensione_carattere.php" title="Come ridimensionare la grandezza del testo" accesskey="7"><span>Dimensione testo (7)</span></a></li>
<li class="menu"><a class="menu" href="dichiarazione.php" title="Dichiarazione di accessibilità" accesskey="8"><span>Dichiarazione accessibilità (8)</span></a></li>
</ul>
</div>
<div id="colonna-sx">
<h1>Studio Grafico Augusti Design</h1>
<hr />
<div class="clean"></div>
<p>Lo <span style="color:#009900;"><strong>Studio Grafico Augusti Design</strong></span> si propone, con i suoi collaboratori, di creare Siti Web Accessibili e Validati.</p>
<p>Sfogliando le pagine del sito, con l'aiuto del menù in alto, potrete renderVi conto di quanto teniamo al "web per tutti",
utilizzando linguaggi semplici, puliti e, soprattutto, fruibili a tutti gli Utenti.</p>
<p>Lo <span style="color:#009900;"><strong>Studio Grafico Augusti Design</strong></span> ha sede in provincia di Milano.</p>
<p>Il nostro obiettivo è raggiungere il massimo impatto creativo nel design pubblicitario con tutti i nostri progetti.</p>
<p>L'eleganza dell'immagine, il gusto nel design, la tecnologia e la conoscenza nello sviluppare l'architettura dei siti,
vengono da noi coesi in un unico progetto che arriva a realizzare i desideri del Cliente.</p>
<p>Per contattare lo Studio, <a class="testo" href="contatti.php" title="Vai alla pagina che permette di contattare lo Studio Grafico Paola Augusti">cliccare qui.</a></p>
<p>Vi auguriamo una buona navigazione.</p></div>
<div class="clean"></div>
<div id="footer">Grafica e Contenuti Paola Augusti 2006 - Milano - P.Iva 05254560963</div>
</div>
<div class="validazioni">
<!-- Inizio Codice Shinystat -->
<script type="text/javascript" src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=paolaaugusti"></script>
<noscript>
<p><a href="http://www.shinystat.com" title="contatore">
<img src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=paolaaugusti" width="90" height="31" alt="Counters" style="border:0" /></a></p>
</noscript>
<!-- Fine Codice Shinystat -->
</div>
<div class="validazioni">
<p><a href="http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.paolaaugusti.com%2F"><img src="immagini/xhtml_valido.jpg" width="80" height="15" style="border:0" alt="Xhtml Valido!" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.paolaaugusti.com%2F"><img src="immagini/css_valido.jpg" width="80" height="15" style="border:0" alt="CSS Valido!" /></a></p>
</div>
</body>
</html>

Grazie a tutti, anticipatamente

[laburno]

Te lo fa su tutti i browser? Non sono pratico coi layout liquidi, perciò ti butto li due idee (magari funzionano) :D:

• Prova a dare a colonna-sx un width del 70%. Presumo che tu gli abbia dato 69% per lasciare uno spazio per i bordi etc.
• Altra cosa è il margin:auto del #menu. Potresti provare a specificare un margin sinistro esatto.

[massy]

hai dato padding-left: 10%; alla classe menu

classe che hai concatenato nel div e nell'ul

mi sarei stupito se ci fosse stata un aspetto diverso dalla foto.

<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu"

Di questo parlo
tra l'altro ti bastava solo il primo id;
poi per gestire gli altri elementi nel css potevi usare

div#menu ul
div#menu ul li
div#menu ul li a
div#menu ul li a:hover

Scusami per la fretta... spero si capisca il senso

[paola.mi]

Ciao, Laburno e grazie.
Per la colonna sx, se aumento anche solo di un px mi compare la barra orizzontale...
Sono cose che ho già provato...

[paola.mi]

Massy... ho tolto il padding left e non è cambiato nulla...

[paola.mi]

... vabbé... me lo terrò così... le ho provate tutte... :bho: