Problema bordo di 3px

[Sonikag]

Ho un div chiamato container di larghezza 760px e un bordo di 3px.
Il problema sta che explorer sottrae i 3px di sx + i 3px di dx dai 760 e la larghezza totale rimane 760, al contrario ff aggiunge 3px a destra e 3px a sinistra quindi la larghezza totale è 766.

Per ovviare al problema ho tolto il bordo di 3px a container e l'ho messo ad un div che ho chiamato bordo3px, ma come faccio a dare la larghezza a questo div? di default mi tiene 100% e se la imposto fissa ho lo stesso problema.

[pierofix]

Allora, inutile dire che l'errore nel box model è di IE (che strano :rollo: ). Puoi tranquilamente tornare alla tua struttura originaria, usando un piccolo hack nel css.

In cosa consiste? Semplice: dare due istruzioni in successione, la prima "sbagliata" per IE e poi ritrattare tutto, dire che scherzavi e dici - questa volta però in modo che ti capiscano solo i browser degni di questo nome (IE! ) - le dimensioni giuste. Ecco come:

#divinquestione {
   width:760px;
   border:3px solid #000;
}
body>#divinquestione { /* IE non riconosce questo selettore */
   width:754px;
}

[Sonikag]

Funziona grazie.

Il problema è che ff ed explorer continuano ad avere comportamenti troppo diversi.

Quello che vorrei è img a sx, alla sua destra in alto il menu, e sotto al menù l'immagine di una barra lunga quanto il menù.

ff mi fa vedere tutto correttamente, mentre explorer mi manda sempre a capo una voce di menù.

<div id="banner">[img]interfaccia/logo1.jpg[/img] 
    <ul class="menu">
	[*]home
	[*]servizi
	[*]lavoriamo con
	[*]contatti
	[/list][img]interfaccia/barra.jpg[/img]</div>

.bordright {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	float: left;
	margin: 0px;
	padding: 0px;
}
.menu, .menu li, .menu ul{
display: inline;
	list-style-image: none;
	list-style-type: none;
}

(Gli id associati al menù impostano la voce larga 147px e alta 93)

[pierofix]

Scusa, hai la pagina online? Così non capisco na cippa.

Ah, aspetta, stamattina ti ho solo ancora aiutata e non ti ho ancora rotto le scatole. Lo sai che il punto 3.4 delle WCAG 1 sconsiglia l'uso di dimensioni in px e predilige u.m. come em o %?

- www.w3.org/TR/WCAG10/#gl-structure-presentation

[Sonikag]

Il testo è tutto rigorosamente in em. le dimensioni dei pulsanti mi sono state imposte

Non riesco a mettere la pag on-line, ma cerco dispiegarmi meglio

Ho una header di 760px di larghezza e due colonne.
La colonna di sinistra deve contenere una immagine larga 147px e basta, mentre la colonna di destra deve avere 2 righe, nella prima in alto il menù, mentre nella seconda in basso un immagine.

Ho modificato il codice in questo modo:

<div id="banner"><div id="bar">[img]interfaccia/logo1.jpg[/img]</div> 
    <ul class="menu">
	[*]home
	[*]servizi
	[*]lavoriamo con
	[*]contatti
	[/list][img]interfaccia/barra.jpg[/img]</div>

#bar {
			float: left;
			width: 100px;
			margin: 0px;
			padding: 0px;
		text-align:left;
		}
.bordright {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	float: left;
	margin: 0px;
	padding: 0px;
}
.menu, .menu li, .menu ul{
display: inline;
	list-style-image: none;
	list-style-type: none;
}

Il problema è che explorer mi manda sempre a capo la voce4 di menu come se non ci fosse posto. Ho provato a ridurre la colonna di sinistra a 50px anzichè a 147 ma me la fa sempre vedere di circa 150px mandandomi a capo l'ultima voce di menu.

[pierofix]

Prova a dare margin e padding pari a zero al menu e i suoi list item. Poi, prova a usare lo stesso hack di prima per definire la larghezza dei link e - ancora - dei list item.

[Sonikag]

si avvicina tutto ma l'ultima voce continua ad andare a capo. Ho fatto una prova con fireworks. Ho fatto un print screen ho provato a tagliareil bottone che va a capo e a metterlo al suo posto e ho calcolato che avanzano ben 13cm quindi non è un problema di spazio.

Essendo che se riduco la colonna di sinistra questa rimane di 100px e che l'immagine dell colonna di sinistra rimanga sempre qualche pixel a destra con explorer direi che il problema potrebbe essere nelle due colonne.

Quindi:

<div id="container">
<div id="banner">
<div id="bar">[img]interfaccia/logo1.jpg[/img]</div>
    <ul class="menu">
	[*]...
	[/list][img]interfaccia/barra.jpg[/img]</div>

#container {
			width: 760px;
			margin: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
			background-color:#fff;
			border: 3px solid #fff;
		}
		
		body>#container { /* IE non riconosce questo selettore */
			width:754px;
			margin: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
			background-color:#fff;
			border: 3px solid #fff;
		}


		#banner {
			padding: 0px;
			margin: 0px;
			text-align:left;
		}
		
		
#bar {
			float: left;
			width: 147px;
			margin: 0px;
			padding: 0px;
		text-align:left;
		}

Non potrebbero essere quei margin auto la causa? però se li tolgo poi non mi centra tutta la pagina....

[pierofix]

Scusa, ma questa mattina ho più sonno del solito. Non è che saresti così gentile da semplificare il più possibile il codice? Mi si incrociano gli occhi con tutte quelle righe.

Insomma, ti chiedo un piccolo sforzo per compattare il più possibile e scrivere il codice e il problema nel modo più semplice possibile, magari schematizzando a step.

Se vuoi mandarmi a hahare fai pure, ma questa mattina proprio non ce la faccio.

[Sonikag]

No no no ti intartaglio la vita invece:P

Spaciugando sono arrivata a questa soluzione:

<div id="banner">
<div id="bar">foto</div>
<div id="bar2">menu e img</div>
</div>

		#banner {
			padding: 0px;
			margin: 0px;
		}
		
		
#bar {
			float: left;
			width: 147px;
			margin: 0px;
			padding: 0px;
		text-align:left;
		}
		#bar2 {
			float: right;
			width: 604px;
			margin: 0px;
			padding: 0px;
		text-align:right;
		}

In questo modo visualizzo il menu come voglio, il problema è che con ff tutto ok, con explorer mi succede che bar2 anzichè essere affiancata a destra va a finire sotto a destra.

[Sonikag]

Avevo un margine sull'iiimagine che scazzava tutto... cavolata estrema!
ok ok ok basta

Grazie mille!