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>
Member Avatar for GreenDay2001

Well making it transitional instead of strict would make it work fine. But to do it with strict only give a dimension to lengths, font-size etc wherever needed. You see these isn't only one kind in CSS.

So e.g. insted of

<span style="font-size: 32;">

it should be

<span style="font-size: 32px;">

Thanks a lot, now I know. I adjusted the .topH and .topL and it works fine with the class assignment now. Thanks for educating me. It would have taken me weeks to figure that out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.