Problem rendering table cell height in IE - HTML Forums

dale282 · 03-26-2008, 12:07 PM

Hi all,

Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail.

here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php

any help you can offer muchly appreciated!

rangana · 03-26-2008, 10:23 PM

First, <center> is a deprecated element and the width attribute in the td as well as the <i> tag

Second, layouts using tables isn't ideal

Third, why not shift to divs

,i'll give your code a shot

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IVFDF 2009</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
		font-family: Trebuchet MS, tahoma, arial;
		font-size: 9pt; 
		color: #000;
		}
#layout
{
width:768px;
margin:auto;
border-left: 1px dotted #ff0000;
border-right: 1px dotted #ff0000;
border-spacing: 5px;
}
#header
{
width:563px;
height:50px;
float:left;
color: #000000;
font-size: 14pt;
text-align: left;
background-color: #fff;
padding-left:5px;
}
#nav
{
color: #fff;
text-align: center;
background-color: #EF0094;
height:25px;
width:563px;
margin-left:5px;
float:left;
}
nav a:link 
{
color: #fff; 
font-family: tahoma; 
font-size: 12pt; 
font-weight: bold; 
text-decoration: none; 
color: #ff0000; 
}
a.nav:link {
		color: #fff; 
		font-family: tahoma; 
		font-size: 12pt; 
		font-weight: bold; 
		text-decoration: none; 
		}
	
	a.nav:visited {
		color: #fff; 
		font-family: tahoma; 
		font-size: 12pt; 
		font-weight: bold; 
		text-decoration: none;
		}

	a.nav:hover {
		color: #fff; 
		font-family: tahoma; 
		font-size: 12pt; 
		font-weight: bold; 
		text-decoration: underline; 
		}
#right
{
float:right;
}
#footer
{
clear:both;
color: #000000;
text-align: center;
background-color: #FA90D3;
width:748px;
height:100px;
padding-top:10px;
margin-left:5px;
padding-left:5px;
padding-right:5px;
}
a:link {
		color: #ff0000; 
		text-decoration: none; 
		}
	
	a:visited {
		color: #ff0000; 
		text-decoration: none;
		}

	a:hover {
		color: #ff0000; 
		text-decoration: underline; 
		}
		
#update{font-style:italic;float:left;}
#update2{float:right;}


/***************** In your CSS, I haven't used yet ****************/
div.item { 
		background: url(http://www.events.ex.ac.uk/ivfdf2009/templates/para_bg1.jpg) repeat-x; 
		padding: 10px 10px 10px 10px;
		}

	div.item img {
		float: right;
		}

	div.item h1 {
		font-size: 11pt;
		color: #ff0000;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		}

	div.news {
		margin-left: 20px;
		}
	h1 {
		font-size: 13pt;
		color: #ff0000;
		margin-left:5px;
		}

	h2 {
		font-size: 12pt;
		color: #ff0000;
		}

	h3 {
		font-size: 10pt;
		color: #ff0000;
		}
	/*  CSS OBTAINED EXTERNALLY  */

	#dropmenudiv{
		position:absolute;
		border:1px solid black;
		border-bottom-width: 0;
		font:normal 12px Verdana;
		line-height:18px;
		z-index:100;
		}

	#dropmenudiv a{
		width: 100%;
		display: block;
		text-indent: 3px;
		border-bottom: 1px solid black;
		padding: 1px 0;
		text-decoration: none;
		font-weight: bold;
		}

	#dropmenudiv a:hover{ /*hover background color*/
		background-color: yellow;
		}
/********** End of your CSS ************/
</style>
<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu1 = INFORMATION
var information=new Array()
information[0]='<a href="information.php">Getting Here</a>'
information[1]='<a href="information.php">Accommodation</a>'
information[2]='<a href="information.php">Food & Drink</a>'
information[3]='<a href="information.php">Parking</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
</head>
<body>
<div id="layout">
	<div id="header">
	IVFDF 2009: Exeter<br/>
	Friday 27th February - Sunday 1st March 2009
	</div>
	
	<div id="right">
	<img src="http://www.events.ex.ac.uk/ivfdf2009/templates/IVFDFlogofinal_colour2_200px.gif" alt="IVFDF 2009" />
	<p>Countdown until IVFDF 2009:<br/>337 days,<br/> 18 hours,<br/>and 54 minutes.</p>
			<p>Contact details:<br/>
			<b>Email:</b> mason.rj@btconnect.com<br/>
			<b>Phone:</b> 01392 411434</p>
	</div>
	
	<div id="nav">
	<a href="home.php" class="nav">Welcome</a> | <a href="events.php" class="nav">What's On</a> | <a href="booking.php" class="nav">Prices & Booking</a> | <a href="information.php" class="nav" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, information, '150px')" onMouseout="delayhidemenu()">Information</a>
	</div>
	
	<div id="content">
	<h1>Page title</h1>
	</div>
	
	<div id="footer">
	<p>Full list of links: <a href="home.php">Welcome</a> | <a href="events.php">Main Events</a> | <a href="booking.php">Prices & Booking</a> | <a href="information.php">Information</a></p>

			<p><a href="http://www.ivfdf.org/">IVFDF Central</a> | <a href="http://www.exeterfolksoc.org.uk/">Exeter University Folk Society</a> | <a href="http://www.ex.ac.uk">The University of Exeter</a></p>
			
		<span id="update">This page was last updated on: 9th February 2008 00:07.</span>
		<span id="update2">Page designed by: Dale Potter</span>

	</div>
</div>
</body>
</html>

dale282 · 03-26-2008, 11:51 PM

Thanks a lot rangana. I've implemented your code rewrite, albeit with a few alterations. I'm really impressed that you took the time to propose those changes, which must have taken some time to look at and write.

I knew divs could be used in place of tables for page layouts but I've been unable to get them to work properly in the past. Think it's about time I looked into them in some detail...

Thanks again.

rangana · 03-27-2008, 12:07 AM

No problem, you're most welcome