0

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>
2
Contributors
2
Replies
3
Views
10 Years
Discussion Span
Last Post by world_weapon
0

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;">
0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.