problema grafico con explorer

**Tazio** · 17-03-2008, 16:49

Ciao a tutti, come da titolo ho un problema grafico con interner explorer (sia il 7 che il 6)
ho una tabella con tante righe create dinamicamente, ed ogni riga ha al suo interno un'altra tabella

codice:

<table cellspacing="1" cellpadding="0" width="100%" border="0" class="prezzi">
<?
     $prices = true;
     $lastDate = '';
     if(isset($UNIT_PRICES) && $UNIT_PRICES!= "ERROR")
     {
?>
     <tr>
	<th width="116" class="pad"><?=$TEXT->getText('page_unit_prices','text15')?><?=$TEXT->debug('page_unit_prices','text15')?></th>
	<th width="90" class="pad"><?=$TEXT->getText('page_unit_prices','text16')?><?=$TEXT->debug('page_unit_prices','text16')?></th>
	<th width="90" class="pad"><?=$TEXT->getText('page_unit_prices','text17')?><?=$TEXT->debug('page_unit_prices','text17')?></th>
	<th width="50" class="pad"><?=$TEXT->getText('page_unit_prices','text18')?><?=$TEXT->debug('page_unit_prices','text18')?></th>
	<th width="58" class="pad"><?=$TEXT->getText('page_unit_prices','text19')?><?=$TEXT->debug('page_unit_prices','text19')?></th>
	<th width="32" class="pad"><?=$TEXT->getText('page_unit_prices','text20')?><?=$TEXT->debug('page_unit_prices','text20')?></th>
	<th width="38" class="pad"></th>
     </tr>
<?
     $out = '';
     foreach($UNIT_PRICES as $key=>$price)
     {
	$out.='<tr height="26"  style="background:#EEE"><td colspan="7" id="price'.$key.'"><table id="tabella'.$key.'"><tr>
	<td id="cel'.$key.'a" width="118" align="center">'.$price->getPeriodo().'</td>
	<td id="cel'.$key.'b" width="95" align="center">'.$price->getStartDate().'</td>
	<td id="cel'.$key.'c" width="95" align="center">'.$price->getEndDate().'</td>
	<td id="cel'.$key.'d" width="55" align="center">'.$price->getDaily().'</td>
	<td id="cel'.$key.'e" width="63" align="center">'.$price->getWeekly().'</td>
	<td id="cel'.$key.'f" width="37" align="center">'.$price->getMinimo().'</td>
	<td id="cel'.$key.'g" width="41" align="center">
		<form id="upf'.$key.'" action="'.$PHP_SELF.'?pid='.$UNIT->getPropertyId().'&amp;uid='.$UNIT->getUnitId().'" method="post">
		<input type="hidden" name="action" id="action" value="">
		<input type="hidden" name="object" id="object" value="'.$price->getSerial().'">
		<input type="hidden" name="upup_period" id="upup_period'.$key.'" value="">
		<input type="hidden" name="upup_start_date" id="upup_start_date'.$key.'" value="">
		<input type="hidden" name="upup_end_date" id="upup_end_date'.$key.'" value="">
		<input type="hidden" name="upup_daily" id="upup_daily'.$key.'" value="">
		<input type="hidden" name="upup_weekly"id="upup_weekly'.$key.'" value="">
		<input type="hidden" name="upup_min" id="upup_min'.$key.'" value="">
		[img]/'.$TEMPLATE_ROOT.'/img/edit2.gif[/img]getPeriodo().'\',\''.$price->getStartDate().'\',\''.$price->getEndDate().'\',\''.$price->getDaily().'\',\''.$price->getWeekly().'\',\''.$price->getMinimo().'\')">
		[img]/'.$TEMPLATE_ROOT.'/img/delete.gif[/img]
		</form>
	</td></tr></table></td>
     </tr>';
    }
    echo $out;
}else
{
?>
     <tr><td colspan="7" height="10">[img]/<?=$TEMPLATE_ROOT?>/img/blank.gif[/img]</td></tr>
     <tr><td colspan="7" align="center"><?=$TEXT->getText('page_unit_prices','text21')?><?=$TEXT->debug('page_unit_prices','text21')?></td></tr>
     <tr><td colspan="7" height="10">[img]/<?=$TEMPLATE_ROOT?>/img/blank.gif[/img]</td></tr>
<?
     $prices = false;
}
?>
</table>

questi i risultati rispettivamente con FF e IE e sono praticamente uguali
ora, cliccando sulla prima immagine di ogni riga, richiamo una funzione javascript che mi crea una tabella che appendo ad ogni riga (ovviamente la tabella precedente tramite la proprietà display la nascondo)

codice:

    function modifyPrice(id,season,start,end,daily,weekly,min)
    {
		if(document.getElementById && document.createElement)
	    	{
		    	document.getElementById('tabella'+id).className = 'noView';
		    	var table = document.createElement("table");
		    	table.setAttribute('width','100%');
		    	table.setAttribute('cellpadding','0');
		    	table.setAttribute('cellspacing','0');
		    	table.setAttribute('id','table'+id+'');
		    	var tbody = document.createElement('tbody');
		    	var tr = document.createElement('tr');
		    	var td = document.createElement('td');
		    	td.setAttribute('width','119');
		    	td.setAttribute('align','center');
		    	var input = document.createElement('input');
		    	input.setAttribute('type','text');
		    	input.setAttribute('name','period');
		    	input.setAttribute('value',season);
		    	input.setAttribute('id','cel'+id+'h');
		    	input.setAttribute('size','14');
		    	td.appendChild(input);
		    	var td1 = document.createElement('td');
		    	td1.setAttribute('width','96');
		    	td1.setAttribute('align','center');
		    	var input1 = document.createElement('input');
		    	input1.setAttribute('type','text');
		    	input1.setAttribute('name','start_date');
		    	input1.setAttribute('value',start);
		    	input1.setAttribute('id','cel'+id+'i');
		    	input1.setAttribute('size','10');
		    	input1.setAttribute('maxLength','10');
		    	input1.setAttribute('readonly','readonly');
		    	input1.onclick = function(){displayCalendar(document.getElementById('cel'+id+'i'),'yyyy-mm-dd',this,'<?=$LANGUAGE?>');}
		    	var img = document.createElement('img');
		    	img.setAttribute('src','/<?=$TEMPLATE_ROOT?>/img/cal.gif');
		    	img.setAttribute('align','top');
		    	img.setAttribute('id','cel'+id+'cal1');
		    	img.className = 'cursor';
		    	img.onclick = function(){displayCalendar(document.getElementById('cel'+id+'i'),'yyyy-mm-dd',document.getElementById('cel'+id+'i'),'<?=$LANGUAGE?>');}
		    	td1.appendChild(input1);
		    	td1.appendChild(img);
		    	var td2 = document.createElement('td');
		    	td2.setAttribute('align','center');
		    	td2.setAttribute('width','96');
		    	var input2 = document.createElement('input');
		    	input2.setAttribute('type','text');
		    	input2.setAttribute('name','end_date');
		    	input2.setAttribute('value',end);
		    	input2.setAttribute('id','cel'+id+'l');
		    	input2.setAttribute('size','10');
		    	input2.setAttribute('maxLength','10');
		    	input2.setAttribute('readonly','readonly');
		    	input2.onclick = function(){displayCalendar(document.getElementById('cel'+id+'l'),'yyyy-mm-dd',this,'<?=$LANGUAGE?>');}
		    	var img1 = document.createElement('img');
		    	img1.setAttribute('src','/<?=$TEMPLATE_ROOT?>/img/cal.gif');
		    	img1.setAttribute('align','top');
		    	img1.setAttribute('id','cel'+id+'cal2');
		    	img1.className = 'cursor';
		    	img1.onclick = function(){displayCalendar(document.getElementById('cel'+id+'l'),'yyyy-mm-dd',document.getElementById('cel'+id+'l'),'<?=$LANGUAGE?>');}
		    	img1.setAttribute('alt','Calendar');
		    	td2.appendChild(input2);
		    	td2.appendChild(img1);
		    	var td3 = document.createElement('td');
		    	td3.setAttribute('width','56');
		    	td3.setAttribute('align','center');
		    	var input3 = document.createElement('input');
		    	input3.setAttribute('type','text');
		    	input3.setAttribute('name','daily');
		    	input3.setAttribute('value',daily);
		    	input3.setAttribute('id','cel'+id+'m');
		    	input3.setAttribute('size','5');
		    	input3.setAttribute('maxLength','5');
		    	td3.appendChild(input3);
		    	var td4 = document.createElement('td');
		    	td4.setAttribute('width','63');
		    	td4.setAttribute('align','center');
		    	var input4 = document.createElement('input');
		    	input4.setAttribute('type','text');
		    	input4.setAttribute('name','weekly');
		    	input4.setAttribute('value',weekly);
		    	input4.setAttribute('id','cel'+id+'n');
		    	input4.setAttribute('size','5');
		    	input4.setAttribute('maxLength','5');
		    	td4.appendChild(input4);
		    	var td5 = document.createElement('td');
		    	td5.setAttribute('width','37');
		    	td5.setAttribute('align','center');
		    	var input5 = document.createElement('input');
		    	input5.setAttribute('type','text');
		    	input5.setAttribute('name','min');
		    	input5.setAttribute('value',min);
		    	input5.setAttribute('id','cel'+id+'o');
		    	input5.setAttribute('size','3');
		    	input5.setAttribute('maxLength','2');
		    	td5.appendChild(input5);
		    	var td6 = document.createElement('td');
		    	td6.setAttribute('width','41');
		    	td6.setAttribute('align','center');
		    	td6.setAttribute('id','cel'+id+'p');
		    	var img2 = document.createElement('img');
		    	img2.setAttribute('src','/<?=$TEMPLATE_ROOT?>/img/acceptB2.gif');
		    	img2.className = 'cursor';
		    	img2.setAttribute('title','Confirm');
		    	img2.setAttribute('alt','Confirm review');
		    	img2.onmouseover = function(){this.src='/<?=$TEMPLATE_ROOT?>/img/acceptB.gif'};
		    	img2.onmouseout = function(){this.src='/<?=$TEMPLATE_ROOT?>/img/acceptB2.gif'};
		    	img2.onclick = function(){document.getElementById('upf'+id).action.value='upup';document.getElementById('upf'+id).action.name='upup_action';document.getElementById('upf'+id).object.name='upup_object';document.getElementById('upup_period'+id).value = document.getElementById('cel'+id+'h').value;document.getElementById('upup_start_date'+id).value = document.getElementById('cel'+id+'i').value;document.getElementById('upup_end_date'+id).value = document.getElementById('cel'+id+'l').value;document.getElementById('upup_daily'+id).value = document.getElementById('cel'+id+'m').value;document.getElementById('upup_weekly'+id).value = document.getElementById('cel'+id+'n').value;document.getElementById('upup_min'+id).value = document.getElementById('cel'+id+'o').value;open=false;document.getElementById('upf'+id).submit();};
		    	var space = document.createTextNode('\u00a0');
		    	var img3 = document.createElement('img');
		    	img3.className = 'cursor';
		    	img3.setAttribute('title','Undo');
		    	img3.setAttribute('alt','Undo Action');
		    	img3.setAttribute('src','/<?=$TEMPLATE_ROOT?>/img/arrow_undoB2.gif');
		    	img3.onmouseover = function(){this.src='/<?=$TEMPLATE_ROOT?>/img/arrow_undoB.gif'};
		    	img3.onmouseout = function(){this.src='/<?=$TEMPLATE_ROOT?>/img/arrow_undoB2.gif'};
		    	img3.onclick = function(){document.getElementById('cel'+id+'i').value = start;document.getElementById('cel'+id+'l').value = end;/*document.getElementById('tabella'+id).className= 'view';document.getElementById('table'+id).className = 'noView backTablePrice';*/document.getElementById('table'+id).className = 'noView';document.getElementById('tabella'+id).className = '';open=false;}
		    	td6.appendChild(img2);
		    	td6.appendChild(space);
		    	td6.appendChild(img3);
		    	tr.appendChild(td);
		    	tr.appendChild(td1);
		    	tr.appendChild(td2);
		    	tr.appendChild(td3);
		    	tr.appendChild(td4);
		    	tr.appendChild(td5);
		    	tr.appendChild(td6);
		    	tbody.appendChild(tr);
		    	table.appendChild(tbody);
		    	var tdprice = document.getElementById('price'+id);
		    	tdprice.appendChild(table);
		    	modify.push(id);
		    	open = true;
		    	idSeason = id;
    		}
    }

questi i risultati, il 1° con FF e il 2° con IE
non riesco a capire perchè IE modifica la larghezza delle celle della prima riga della tabella visto che non vado a modificarla. Qualcuno a per caso qualche idea?
Scusate la lunghezza del post e spero di aver spiegato al meglio il problema

**Tazio** · 18-03-2008, 13:23

Uppino

Sono ben accette anche altre soluzioni

**Tazio** · 19-03-2008, 12:03

Ho risolto. il problema non era javascript..

aggiungo la soluzione nel caso qualcuno si trovasse nella stessa situazione (dubito, però non si sa mai)

ho assegnato alla tabella iniziale anche questa classe

codice:

.reservations{
     table-layout:fixed;
}

se penso al tempo che c'ho perso..

Discussione: problema grafico con explorer

Strumenti discussione

Ricerca discussione

Visualizza

problema grafico con explorer

Permessi di invio