Problemi div e bordi con IE

**djdalle** · 20-06-2008, 11:32

Ciao a tutti. questo è il mio primo sito che faccio. sto avendo non pochi problemi con le varie istruzioni css nei vari browser.
Molti sono riuscito a risolverli.
Me ne rimane uno (sperando che non se ne ripresentino altri!).

Ecco la pagina
http://sedicisi.altervista.org/prova.htm
Con mozilla e con IE 7 nessun problema sul risultato che voglio ottenere.
Con internet Explorer sotto il 7 invece nascono i problemi...

come faccio ad eguagliare le visualizzazioni nei vari browser (in IEc'è un problema nello sfondo con i bordi)?
Come faccio a mettere il div .f24 a larghezza 25% senza che in IE vada a capo? (sicuramente è un problema del bordo del div .sfondo ma non riesco a capire come arginarlo) (idem il div.f49 portarlo a div.f50 e il div.elenchi2 portarlo a div.elenchi).

Per non complicarvi la vita posto solo il codice che mi da i problemi
Questo è l'HTML

codice:

<body>
<div class="tutto">
	<div class="sfondo">
		<div class="f75">
			<div class="f50">
				<div class="elenchi">
					<div class="giorno">GIORNO</div>
					<div class="elencone">
						<div class="elenchino">
							<div class="f20">[img]/Immagini/laguna.jpg[/img]</div>
							<div class="disco"> Laguna Dinner</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="f49">
				<div class="elenchi2">
					<div class="notte">NOTTE</div>
					<div class="elencone">
						<div class="elenchino">
							<div class="f20">[img]/Immagini/laguna.jpg[/img]</div>
							<div class="disco"> Laguna Dinner Laguna Dinner Laguna Dinner L a g u n a Dinner</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="f24">
			<div class="notte">NOTTE</div>
			<div class="elencone">
				<div class="elenchino">
					<div class="f20">[img]/Immagini/laguna.jpg[/img]</div>
					<div class="disco"> Laguna Dinner Laguna Dinner Laguna Dinner L a g u n a Dinner</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
    	<div class="clear"></div>
	</div>
</div>
</body>

e questo è il CSS

codice:

.xcento {width:100%; float:left;}

body {margin:0px;
	text-align:center;
	padding:5px;
	font: 0.8em/1.25 Geneva, Arial, Helvetica, sans-serif;
	background-color:#FFF; 
	color:#606;}

div.basso {margin:50px 0px 0px 1px;}
div.clear {clear:both;}
div.disco {float:left; width:76%;}
div.elenchi {margin:0% 5%; color:#007;}
div.elenchi2 {margin:0% 4% 0% 5%; color:#007;}
div.elenchino {margin:0% 2%; color:#007;}
div.elencone {background-color:#FFA9FF;}
div.f24 {float:left; width:24%;}
div.f49 {float:left; width:49%;}
div.f50 {float:left; width:50%}
div.f75 {margin-left:2px; float:left; width:75%;}
div.giorno {background-color:#CB0093; color:#FFF; text-align:center;}
div.notte {background-color:#7f005c; color:#FFF; text-align:center;}
div.sfondo {background:#FDCFFD; border:1px solid #ff86dc; border-top:none; border-bottom:none;}
div.tutto {width:980px; margin:0px auto; text-align:left;}

Grazie in anticipo per l'aiuto

**djdalle** · 20-06-2008, 12:31

non vorrei che il post andasse nella sezione css...anche perchè sono parecchio complementari le sezioni e non è semplice indirizzarlo nella sezione giusta!

**djdalle** · 21-06-2008, 13:55

up

**djdalle** · 21-06-2008, 18:18

Ho semplificato molto il problema riportato sopra (magari vi passava la voglia di analizzare tutto il codice) (so che lo style non lo dovrei usare(l'ho fatto per comodità)

Con questo codice mozilla e internet explorer (sotto al 7) interpretano le cose in modo diverso perchè??? come fare a risolvere?
AIUTOOOOO!!!

Questo è l'html

codice:

<body>
<div class="tutto">
	<div class="sfondo">
		<div class="f50" style="background-color:#333; color:#FFF;">cicciasx</div>
		<div class="f50" style="background-color:#777; color:#FFF;">cicciadx</div>
		<div class="clear"></div>
	</div>
</div>
</body>

E questo il css

codice:

body {margin:0px;
	text-align:center;
	padding:5px 0px;}
div.clear {clear:both;}
div.f50 {float:left; width:50%}
div.sfondo {background:#FDCFFD; border:10px solid #ff86dc; border-top:none; border-bottom:none;}
div.tutto {width:980px; margin:0px auto; text-align:left;}

**djdalle** · 22-06-2008, 21:05

prova così

codice:

<body>
<div class="tutto">
<div class="sfondo">
<div style="background-color:#333;>cicciasx</div>
<div style="background-color:#777;>cicciadx</div>
</div>
</div>
</body>

css
codice:

body {margin:0px; text-align:center; padding:5px 0px; }
.sfondo div { float:left; display: inline; width:480px; color: #fff;}
div.sfondo {background:#FDCFFD; border:10px solid #ff86dc; width: 960px;
border-top:0; border-bottom:0; height: auto; overflow: hidden;}
div.tutto {width:980px; margin:0px auto; text-align:left;}

Ciao

Purtroppo così i div più interni in IE 6 vanno a capo. e poi preferirei mantenere comunque solo il div.tutto in px e tutto il resto in percentuale.
Quei div a 480px preferirei perciò averli al 50%. è possibile?

Discussione: Problemi div e bordi con IE

Strumenti discussione

Ricerca discussione

Visualizza

Problemi div e bordi con IE

Permessi di invio