IE: vatti a fidare - [Scrollbar orizzontale]

**ignorantone** · 24-03-2006, 02:21

Salve a tutti..
sarà che io sbaglio qualcosa ma mi sta capitando una cosa strana..
ho ua pagina in html con dentro una semplice tabella con width impostato al 90% e un margine superiore impostato al 5% e uno inferiore al 4%.

La pagina si carica in un frameset.

finchè la tabella non superla l'altezza della pagina allora tutto ok. Se la supera oltre che alla scrollbar verticale ne esce anche una orizzontale. O_O

E questo succede anche se imposto la tabella a 50% DI WIDTH.
Mah.. consigli?

**deleted_11** · 24-03-2006, 15:19

Spiegati meglio.. mostraci l'intero codice di tale tabella..

**ignorantone** · 24-03-2006, 16:03

Allora ribadisco che la pagina si carica in un sito strutturato a frame. Il frame in cui si carica ha dimensioni 660 * 500.

La pagina contine questa tabella:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Forum</title>
<link type="text/css" rel="stylesheet" href="../_css/inner_in.css" />
</head>
<body>
<table>
	<tr>
		<td class="col_sx">Campo 1.1</td>
		<td class="col_dx">Campo 1.2</td>
		<td rowspan="19" colspan="2"></td>
	</tr>
	<tr>
		<td class="col_sx">Campo 2.1</td>
		<td class="col_dx">Campo 2.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 3.1</td>
		<td class="col_dx">Campo 3.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 4.1</td>
		<td class="col_dx">Campo 4.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 5.1</td>
		<td class="col_dx">Campo 5.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 6.1</td>
		<td class="col_dx">Campo 6.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 7.1</td>
		<td class="col_dx">Campo 7.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 8.1</td>
		<td class="col_dx">Campo 8.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 9.1</td>
		<td class="col_dx">Campo 9.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 10.1</td>
		<td class="col_dx">Campo 10.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 11.1</td>
		<td class="col_dx">Campo 11.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 12.1</td>
		<td class="col_dx">Campo 12.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 13.1</td>
		<td class="col_dx">Campo 13.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 14.1</td>
		<td class="col_dx">Campo 14.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 15.1</td>
		<td class="col_dx">Campo 15.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 16.1</td>
		<td class="col_dx">Campo 16.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 17.1</td>
		<td class="col_dx">Campo 17.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 18.1</td>
		<td class="col_dx">Campo 18.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 19.1</td>
		<td class="col_dx">Campo 19.2</td>
	</tr>
	<tr>
		<td class="col_sx">Campo 20.1</td>
		<td class="col_dx">Campo 20.2</td>
		<td colspan="2"></td>
	</tr>
	<tr>
		<td class="col_sx">Campo 20.1</td>
		<td class="col_dx">Campo 20.2</td>
		<td colspan="2"></td>
	</tr>
	<tr>
		<td class="col_sx">Campo 20.1</td>
		<td class="col_dx">Campo 20.2</td>
		<td colspan="2"></td>
	</tr>
	<tr>
		<td class="col_sx">Campo 20.1</td>
		<td class="col_dx">Campo 20.2</td>
		<td colspan="2"></td>
	</tr>
	<tr>
		<td class="col_sx">Campo 20.1</td>
		<td class="col_dx">Campo 20.2</td>
		<td colspan="2"></td>
	</tr>
</table>
</body>
</html>

A questa tabella ho applicato questo stile:

codice:

/* CSS Document */
body {
	background-color: #F4DBAA;
	color: #5B4120;
	font-weight: bold;
	font-size: 12px;
	}
table {
	background-color: #5B4120;
	width: 50%;
	margin-top: 5%;
	margin-bottom: 4%;
	}
td {
	background-color: #BD966B;
	text-align: center;
	}
.tab_img {
	background-color: #5B4120;
	height: 200px;
	width: 200px;
	border: 0px;
	}
.col_sx {
	text-align: left;/*
	width: 17%;
	padding-left: 4px;*/
	}
.col_dx {
	text-align: left;/*
	width: 33%;*/
	}
.intestazione {
	background-color:#5B4120;
	color: #F4DBAA;
	}
.div_descr {
	height: 150px;
	overflow: auto;
	font-size: 11px;
	}

**ignorantone** · 24-03-2006, 16:09

Facendo prove e provine ho notato che la barra orizzontale non mi esce se ometto il DOCTYPE.. ma non so spiegarmi il perchè..

**ignorantone** · 24-03-2006, 17:35

Allora come mi aspettavo la table non c'entra nulla. Dalle numerose prove son riuscito a capire che:

Ipotesi 1
- Scrolling = "no" [nel tag frame del frameset]

Le scrollbar non escono.

Ipotesi 2
- Scrolling = "yes"

Esce sempre la scrollbar verticale, anche quando non serve. In questo caso se il contenuto della pagina supera in lunghezza la pagina la scrollbar verticale si attiva ma non compare alcuna barra orizzontale. [In pratica come dovrebbe essere].

Ipotesi 3
- Scrolling = "auto" e Doctype specificato.

Se il contenuto della pagina supera in lunghezza la pagina, allora escono sia la scrollbar verticale che quella orizzontale.

Ipotesi 4
- Scrolling = "auto" e Doctype NON specificato.

Esce solo la scrollbar verticale sempre che il contenuto della pagina supera in lunghezza la pagina. Per capire che la tabella non c'entrava nulla ho provato in questo modo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Forum</title>
<link type="text/css" rel="stylesheet" href="../_css/inner_in.css" />
</head>
<body>


















































































</body>
</html>

Ovviamente i problemi ci sono solo con IE. Ai postri l'ardua sentenza.

**ignorantone** · 25-03-2006, 00:56

UP

**Zero** · 25-03-2006, 01:01

Spero di non aver letto male, ma se ho ben capito, posso tranquillamente dirti che è un noto bug di Ie.. Ho dovuto "combatterci", tempo fà, durante la realizzazione di un'area d'amministrazione con i frame..

Dai uno sguardo qui

**ignorantone** · 25-03-2006, 01:43

Eh si..
devi aver capito proprio bene.. Deve essere proprio quel bug perchè non mi c'erano altre soluzioni. Sono un ignorantone ma fino a un certo punto.. Grazie della risposta e delle soluzioni indicate ^_*

**ignorantone** · 25-03-2006, 03:19

Allora.. dopo le dovute ricerche sino a quest'ora per venirne a capo inizialmente avevo seguito i consigli trovati nella pagina consigliata. Rendendo quindi la scrollbar orizzontale invisibile con la proprierà overflow-x. Tuttavia questa prprietà non è sandard per i css e quindi era un problema per la validazione.
Tra i commenti della pagina c'era la soluzione ideale e la porto qui in caso qualcuno ne avesse bisogno [anche se credo di essere l'unico a non sapere del bug ghhg].
Bisogna aggiungere questa riga [specificando la verzione xml a cui si fa riferimento prima della specifica del doctype.

codice:

<?xml version="1.0" encoding="utf-8"?>

Discussione: IE: vatti a fidare - [Scrollbar orizzontale]

Strumenti discussione

Ricerca discussione

Visualizza

IE: vatti a fidare - [Scrollbar orizzontale]

Bug ie

Permessi di invio