problema layout 3 colonne

[Sonikag]

Ho un layout a 3 colonne fatto così:

  
<div id="sidebar-a">
<ul>
      <li id="lisxr">1
      <li id="lisxr">2
      <li id="lisxr">3[/list]
<div>
<div id="sidebar-b">
 <div class="tools">Tools</div>
    <ul>
      <li id="lisxr">1
      <li id="lisxr">2
      <li id="lisxr">3[/list]
</div> 
<div id="content">
<h1 class="blu">Titoletto di pagina</h1>
<p class="testo">ppp ppp ppp ppp ppp ppp ppp</p>
<p class="testo">ppp ppp ppp ppp ppp ppp ppp</p>
</div>

		#content {
		margin:0px;
			padding: 6px;
			padding-top:0px;
			background-color: #fff;
	padding-left:150;
	padding-right:150;

		}

		#sidebar-a {
			float: left;
			width:145px;
			margin: 0px;
			padding: 0px;
				text-align: left;
		}
		
				#sidebar-b {
			float: right;
			width:147px;
			margin: 0;
			padding: 0px;
			text-align: left;
		}

1- Il problema è che il testo del content (che è alllineato a sx) esce di un paio di px a sx da dove finisce la siber-a in giù!
2- se notate cose che secondo voi sematicamente non vanno sono qui anche per questo.

[thomas_anderson]

ciao
semanticamente ci siamo. quando ci sono dei problemi in genere io provo ad azzerare tutto e a ricominciare. hai provato ad usare margin per posizionare il content invece di padding? ricorda di mettere più margin rispetto alle due colonne e dichiarare display:inline per evitare il double margin bug di IE.

[Mich_]

Io toglierei completamente i padding left e right dal content (senza sostituirli con margini o altro.
Invece metterei un float anche al content (puoi usare left o right a piacimento, nel tuo caso).

[pierofix]

Non riesco adesso a controllare il CSS, tuttavia provo a suggerirti un accorgimento che ultimamente trovo molto utile. All'inizio del foglio di stile, prova ad azzerare i margini e i padding di tutti gli elementi:

*
{
   margin:0; padding:0;
}

In questo modo dovresti riuscire ad avere un controllo più diretto e meno legato alle interpretazioni base dei vari browser. Facci sapere.

[Edit] Errori o improprietà semantiche e sintattiche da me riscontrate:

1. non puoi usare un id più di una volta nello stesso documento; piuttosto che associare lisxr a ogni singolo elemento di lista, perchè non fare così?
   

   <ul id="lisxr">

2. ciao
3. miao
4. bau

[Sonikag]

1- Sostituendo i padding con i margin il problema purtroppo rimane... dove finisce la colonna il testo esce di 2px. ho provato anche ad esagerare e mettere un margin di 160 con colonna da 145 ma il problema non cambia.

2- Mi sa che mi sfugge qualcosa. Come mai dici che è meglio togliere i margin o i padding? il problema è che se metto un float in IE dopo il testo va a finire sotto la fine delle colonne, in ff vedo le due colonne posizionate correttamente e il testo del content sotto.

3- Piero ho impostato tutto a zero ma quei due cattivissimi pixel con IE ci sono sempre

Sonia

[Mich_]

Punto 2.
Se metti il float solo alle due colonne laterali, la terza tende ad allargarsi quando terminano le due laterali: e` il caso di una immagine inserita dentro un testo.
Usando il padding per "tenerla dentro" (o il margin, che e` piu` o meno la stessa cosa in questo contesto), se il browser interpreta i bordi in modo errato ecco che succede lo spostamento di cui ti lamenti.
Se invece anche la colonna centrale ha il float non puo` piu` allargarsi quando finiscono le colonne laterali.

NOTA: questa soluzione e` alternativa a quella proposta da Piero.


Punto 3.
Potrebbe trattarsi del "bug dei tre pixel"?


Altro modo di risolvere:
usare una DTD XHTML Strict (senza prologo XML, per i noti problemi di IE): in tal caso IE si uniforma agli standard in modo sorprendente (non completo, comunque).

[Sonikag]

Tnx!

Misurati! si tratta prorio di 3px!

Mettendo un float alla colonna centrale (ovviamente togliendo i padding e margin)con ie il content va leggermetne sopra al footer, mentre con ff il content inizia SOTTO le tre colonne.

Sonia

[Mich_]

Originariamente inviato da Sonikag con ie il content va leggermetne sopra al footer, mentre con ff il content inizia SOTTO le tre colonne.

Nel footer chiaramente ci dovra` essere un clear.

Inoltre il tuo errore e` tipico di un posizionamento forzato (cioe` con un position esplicito); non succede se non usi il position, e lasci che il browser faccia il suo lavoro.

[Sonikag]

Quando mi hai parlato del bug dei 3 pixel ho capito fosse qualcosa di "noto" e ho fatto qualche ricerca...
quindi ho risolto mettendo nel header questo:

<!--[if lte IE 6]>
<style type="text/css">
#sidebar-a {
float: left;
width:145px;
margin: 0px;
padding: 0px;
text-align: left;
background-color: #CCFF99;
margin-right:-3px;
}
p{height:1%;margin-left:0}
</style>

---

Comunque appena ho 2minuti sperimento anche il tuo metodo.

Grazie
Sonia

[pierofix]

Sonia, non so se hai visto, ma ho editato il mio post precedente, inserendo delle note su errori nel markup: non vorrei che i tuoi problemi fossero dovuti anche a quelli.