Cellen van tabellen met hoogte 100% in Internet Explorer

Status
Niet open voor verdere reacties.
J

Jerrythafast

Gebruiker
Lid geworden
8 dec 2007
Berichten
19
Ik heb ruime ervaring met HTML en CSS, maar hier kom ik toch even niet uit.

Ziehier de site-in-aanbouw waar het om gaat, deze link doet het alleen als mijn computer aan staat: http://213.17.48.167/ppinfo

Ik heb met de volgende CSS-code de <body> de hele viewport doen vullen, maar kijk gerust in de broncode voor een volledig beeld:
HTML: 
<style type="text/css">
	html, body{
	  margin: 0;
	  padding: 0;
	  border: none;
	  height: 100%;
	}
</style>
Omdat ik nog de grootste moeite heb tabelloos te stylen maak ik de lay-out in tabellen. In FF zul je zien dat de pagina precies in de viewport past. De menubalk neemt predies de hoogte over, evenals het 'tekstscherm' aan de linkerkant van het venster. Dit doe ik door de cel waar de tekst in staat height="100%" te maken. Echter, in IE heb ik gevonden dat wanneer ik een <td> met height="100%" maak, deze 100% niet het scherm uitvult, maar de hoogte van de viewport overneemt. Dus als je viewport 600 pixels hoog is, wordt de menubalk 600pixels+onderkant+bovenkant hoog, in plaats van de benodigde 600 pixels. Dit heeft als gevolg de volgende gebreken:
-De pagina wordt uitgerekt door de menubalk. Deze is op deze manier natuurlijk te lang.
-Het tekstscherm is niet even hoog als de menubalk. Dit komt doordat de onder- en bovenkant van het tekstscherm niet zo groot zijn als de onder- en bovenkant van de menubalk. Het tekstscherm is echter nog steeds te hoog.
-Het grijze gebied van het tekstscherm, waar de eigenlijke tekst in komt, is iets minder hoog dan de lijst. Dit komt doordat de zijkanten van de lijst apart zijn opgebouwd uit een boven- en onderkant en een midden van hoogte '100%'.

Mijn vraag: hoe kan ik ervoor zorgen dat IE een <td> met height="100%" de pagina doet uitvullen in plaats van de 100% domweg te vervangen door de hoogte van de viewport?

N.b. voor zij die dit niet weten/doorhebben: je kunt tabellen prima 100% hoog maken met style="height: 100%". De tabel vult dan de hoogte van het element waar het in staat. Op mijn pagina is dat element <body>, en om <body> de hoogte van de viewport te geven moet je met bovenstaande CSS <body> en <html> óók 100% hoogte geven. Want <html> staat in... de viewport!
 
Laatst bewerkt:
Je mist 24 </td> tags.
bijvoorbeeld:

<table style="height: 100%" width="10" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image: url(images/left_top.gif)" width="10" height="21" />
</tr>
<tr>
<td style="background-image: url(images/left.gif)" height="100%" width="10" />
</tr>
<tr>
<td style="background-image: url(images/left_bottom.gif)" width="10" height="21" />

</tr>
</table>
 
<td /> == <td> </td>

EDIT: Heb nog wel even nagekeken, en inderdaad waren er twee (dus niet 24 maar 2) </td>'s (of eerder /> aan het einde) die ontbraken. Echter is het probleem hiermee niet verholpen.
peter vazed zei:
Gooi je url of sitecode eens in:
http://validator.w3.org/

:cool:
Klik om te vergroten...

die geeft vooral aanmerkingen op backslashes in mijn javascript. zonder die backslashes werkt mijn javascript niet.
 
Laatst bewerkt:
Oké niet gelijk beginnen te lachen, ik heb een oplossing gevonden. Het is verre van ideaal maar ik vond het wel een knappe oplossing, vooral omdat ik javascript nog volop aan het leren ben. Hier komt-ie:
:shocked::shocked::shocked:
HTML: 
<script type="text/javascript" name="javascript">
	function viewportsize(){
	  var viewportheight; 
	  if(typeof window.innerHeight != "undefined"){
	    viewportheight = window.innerHeight;
	  } 
	  else if(typeof document.documentElement != "undefined" && typeof document.documentElement.clientHeight != "undefined" && document.documentElement.clientHeight != 0){
	    viewportheight = document.documentElement.clientHeight;
	  }
	  else{
	    viewportheight = document.getElementsByTagName("body")[0].clientHeight;
	  }
	  var all = document.all ? document.all : document.getElementsByTagName('*');
	  for(var e = 0; e < all.length; e++){
	    if(all[e].className == "maintd"){
	      all[e].style.height = document.all ? (viewportheight - 34) + "px" : (viewportheight - 32) + "px";
	      maintdHeight = parseFloat(all[e].style.height);
	    }
	    if(all[e].className == "containertd"){
	      all[e].style.height = (maintdHeight - 20) + "px";
	      containertdHeight = parseFloat(all[e].style.height);
	    }
	    if(all[e].className == "sideborder")
	      all[e].style.height = (containertdHeight - 42) + "px";
	    if(all[e].className == "texttd_tab")
	      all[e].style.height = (containertdHeight - 24) + "px";
	    if(all[e].className == "menu")
	      all[e].style.height = (maintdHeight - 167) + "px";
	  }
	}
	window.setInterval("viewportsize()", 5000);
</script>

Kijk zelf maar in de broncode waar ik deze classNames heb gebruikt in de HTML.

Q: DUS WAT DOET DIT?!
A: Neemt elke 5 seconden de viewporthoogte en berekent daaruit een aantal getallen die als hoogte worden ingesteld bij HTML elementen met een bepaalde stylesheet-class. Resultaat: bij elke hoogte van de viewport binnen 5 seconden perfecte verticale uitlijning.

Toch, 't is wel een maf script, gemaakt bij gebrek aan hulp om het op een andere manier op te lossen. Best grappig, toch? :cool:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan