Ok, so I am working on a simple layout for what I would like to recycle for several purposes. As usual, the code works like a charm in FF but doesnt work exactly the same in IE6. I havent even tried it in IE7. Anyhow, I was trying to get this done without using CSS to modify the HEADER elements. I originally used topH and topL to do the formatting, but it doesnt make any difference in IE6 and it works either way in firefox. So I used span instead to change the size of text to look like a header. I will most likely put images in the header section but I was just trying to figure out why the text doesnt come out right in IE6 and it works perfect in FF. Here is the code that I have for it. I would rather figure this out than tell everyone to upgrade their browser or switch all together. Any suggestions?
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Prototype 4</title>
<style type="text/css">
.topH {font-size:32; text-align:center;}
.topL {font-size:22; text-align:center;}
.heading {background-color:#ffaa66; text-align: center;}
.menu {text-align:center}
</style>
<SCRIPT type="text/JavaScript">
<!--
function defineHERE(x) {
var box = document.getElementById("defineHere");
box.innerHTML = x;
return true;
}
function getOn(x,define,color) {
x.style.backgroundColor=color;
defineHERE(define);
x.style.cursor='pointer';
return true
}
function getOff(x,color) {
x.style.backgroundColor=color;
defineHERE('Description of Option goes here on mouse over');
x.style.cursor='default';
return true
}
function pgChange(bodyFrameSrc,footFrameSrc) {
window.alert('Not implemented yet')
return true;
}
//-->
</SCRIPT>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width="100%" style="text-align: center;"><span style="font-size: 32;">This is just<br>
A Heading</span><br><span style="font-size: 22;">
And a smaller part of it</span></td>
</tr>
<tr>
<td>
<!-- BEGIN MENU AND BODY LAYOUT SECTION -->
<table width="100%" border="1">
<tr>
<td width="120">
<!-- BEGIN MENU SECTION -->
<TABLE WIDTH='120' BORDER='0' CELLSPACING='0' CELLPADDING='3' ALIGN=LEFT ID='menu'>
<TR>
<TD id='menuHead' class='heading'>
Navigation Menu
</TD>
</TR>
<TR>
<TD id='opt1' ONMOUSEOVER='top.getOn(this,"Option 1 description","#ffaa66")'
ONMOUSEOUT='top.getOff(this,"#ffffff")' ONCLICK='top.pgChange(this)' class="menu">Option 1</TD>
</TR>
<TR>
<TD id='opt2' ONMOUSEOVER='top.getOn(this,"Option 2 desctiption","#ffaa66")'
ONMOUSEOUT='top.getOff(this,"#ffffff")' ONCLICK='top.pgChange(this)' class="menu">Option 2</TD>
</TR>
<TR>
<TD id='opt3' ONMOUSEOVER='top.getOn(this,"Option 3 description","#ffaa66")'
ONMOUSEOUT='top.getOff(this,"#ffffff")' ONCLICK='top.pgChange(this)' class="menu">Option 3</TD>
</TR>
<TR>
<TD id='opt4' ONMOUSEOVER='top.getOn(this,"Option 4 description","#ffaa66")'
ONMOUSEOUT='top.getOff(this,"#ffffff")' ONCLICK='top.pgChange(this)' class="menu">Option 4</TD>
</TR>
<TR>
<TD id='opt5' ONMOUSEOVER='top.getOn(this,"Option 5 description","#ffaa66")'
ONMOUSEOUT='top.getOff(this,"#ffffff")' ONCLICK='top.pgChange(this)' class="menu">Option 5</TD>
</TR>
<TR>
<TD id='def' HEIGHT='50' class="menu">
<SPAN ID='defineHere' style="text-align: center;">Description of Option goes here on mouse
over</SPAN>
</TD>
</TR>
</TABLE>
<!-- END MENU SECTION -->
</td>
<td>
<!-- BEGIN BODY SECTION -->
</td>
</tr>
</table>
<!-- END MENU AND BODY LAYOUT SECTION -->
</td>
</tr>
<tr>
<td style="text-align: center;">FOOT</td>
</tr>
</table>
</body>
</html>