Mysterious Page Loading Twice Issue

Today I dealt with a very mysterious issue.
Every time a page would load, it seemed to reload.

I cannot actually explain what was happening to be honest... but i was able to track down the culprit to a problematic table tag:
<table border="0" cellpadding="0" cellspacing="0" width="100" background="#DEEFEF" id="sidebartable">

the problem ended up being in the background tag...
once I changed this background tag to bgcolor it worked fine!
<table border="0" cellpadding="0" cellspacing="0" bgcolor="">


This was some extremely bizarre behavior and what I did to debug it: I disabled pieces of code until I could isolate where the issue was stemming from. Even then, it took me a while to see that the tag and fix it. I ended up spending a good 2 hours just isolating the piece of code that was causing the issue. I would never have guessed; I honestly still can't explain it. If you know what is going on, I would love it if you told me.

Crossbrowser Show/Hide Div Tag

i had a lot of difficulty to get some code I found to work on both ie and firefox.

After a bit of testing and debugging I found that certain css attributes were not working properly in firefox. Not sure if the attributes were not standard - im no css expert, but be careful on whether you use the display property or the visibility property. It seems that Firefox seems to prefer the visibility property. .

this is the javascript i ended up with to show and hide a div tag (and css properties on the div).

Again be sure you are using visibility tag. Others may have been able to work with css display property... but this worked for me.

function ShowContent(d) {

if (document.getElementById) { // DOM3 = IE5, NS6

document.getElementById(d).style.visibility = "";

} else {

if (document.layers) { // Netscape 4

document.d.visibility= "";

} else { // IE 4

document.all.d.style.visibility = "";

}

}

//if(d.length < 1) { return; }

//document.getElementById(d).style.visibility = "";

}

 

function HideContent(d) {

document.getElementById(d).style.visibility = "hidden";

//alert(d);

if (document.getElementById) { // DOM3 = IE5, NS6

document.getElementById(d).style.visibility = "hidden";

} else {

if (document.layers) { // Netscape 4

document.d.visibility= "hidden";

} else { // IE 4

document.all.d.style.visibility = "hidden";

}

}

//if(d.length < 1) { return; }

}

now for the div tag

<div id="dynamicDiv" style="visibility:hidden; position:absolute; background-color: white;" >

insert your content in here

</div>

then just call the HideContent('dynamicDiv') and ShowContent('dynamicDiv') from click event or create an href link like so:

<a href="javascript:ShowContent('dynamicDiv')">Show The Div</a>

<a href="javascript:HideContent('dynamicDiv')">Hide The Div</a>

hope that helps!

Mz