Another IE6 bug? Or coding mistake?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,187 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,670 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1282 | Replies: 2 | Solved

•

Join Date: Apr 2004

Location: Brownsville or Austin, TX or Faber, VA

Posts: 59

Reputation: world_weapon is an unknown quantity at this point

Rep Power: 5

Solved Threads: 2

world_weapon world_weapon is offline

Offline

Junior Poster in Training

Another IE6 bug? Or coding mistake?

Sep 3rd, 2007

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>

The purpose of my existence is why I am here.

•

Join Date: Oct 2006

Location: India

Posts: 1,289

Reputation: vishesh is on a distinguished road

Rep Power: 4

Solved Threads: 32

vishesh

Offline

Nearly a Posting Virtuoso

Re: Another IE6 bug? Or coding mistake?

Sep 3rd, 2007

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<span style="font-size: 32;">
<span style="font-size: 32;">

it should be

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<span style="font-size: 32px;">
<span style="font-size: 32px;">

•

Join Date: Apr 2004

Location: Brownsville or Austin, TX or Faber, VA

Posts: 59

Reputation: world_weapon is an unknown quantity at this point

Rep Power: 5

Solved Threads: 2

world_weapon world_weapon is offline

Offline

Junior Poster in Training

Re: Another IE6 bug? Or coding mistake?

Sep 3rd, 2007

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.

The purpose of my existence is why I am here.