Magical Disappearing column bug/error FF & IE

When I go to a single post page the page displays as expected. As soon as I enter in a comment and post the comment, the left column shows for a few instants and then disappears. It's still there because I can see it in the source, but it doesn't display. I'm sure it has something to do with something I've done in the code but can't figure it out. The problem presents in every browser I have to test with. Any ideas? Rep for help!

http://www.thatedeguy.com/dev/?p=10#comment-6

Thanks!

If you can tell me how to fix the right column in IE and opera I'll take any help with that as well.

Here's the CSS for it.

body { 

	font: 80% Arial,"Trebuchet MS", "Lucida Sans Unicode", Tahoma, sans-serif;

	padding: 0;

	margin: 0;

	background: #666 url(images/greystripebg.png);

        color: #000;

        background-repeat: repeat;

	}



#body_container {

	overflow: hidden;

	width: 942px;

	margin: 0 auto;

	padding: 0 12px;

	background: #ddd;

	}



#nav_container {

	overflow: hidden;

	display: block;

	padding: 0;

	background: #33d url(images/transgrey.gif);

	}

#nav_main {

	float: left;

	width: 635px;

	margin: 0 10px 0 0;

	padding: 0;

	background: #33d url(images/transgrey.gif);
 
        display: inline;

	}

#nav_main ul {

	float: left;

	margin: 0;

	padding: 0;

	}

#nav_main ul li {

	float: left;

	margin: 0;

	padding: 0;

	display: inline;

	}

#nav_main ul li a {

	font-size: 1em;

	font-weight: bold;

	float: left;

	color: #ffe;

	text-align: center;

	margin: 0;

	padding: 8px 25px;

	text-decoration: none;

	}

#nav_main ul li a:hover, #nav_main ul li a:active {

	border: none;

	margin: 0;

	background: #c60;

	text-decoration: underline;

        color: #000;

	}

#nav_main ul li#current a { background: #c60; color: #000; }



#search form {

	float: right;

	margin: 0;

	padding: 0 5px 0 0;

	}

#search input#s {

	width: 235px;

	padding: 5px;

	margin: 2px 0;

	color: #333;

	background: #f7f7f7;

	border: 1px solid #c60;

        

	}

#search input#search-submit {

	width: 50px;

	padding: 4px;

	margin: 0 0 0 0;

	color: #fff;

	border: 1px solid #333;

	background: #660000;

	}



#header {

	float: left;

	width: 921px;

	margin: 0;

	padding: 10px 10px;

	display: block;

	clear: left;

	border-width: 1px 0;

	border-style: solid;

	border-color: #000;

	background: #fff;

	}

#header h1 {

	display: inline;

	float: left;

	

	font-size: 2.5em;

	font-weight: bold;

	margin: 0;

	padding: 0;

	}

#header h1 a {

	padding: 0;

	margin: 0 0 0 5px;

	}


#header_title {
        float: left;
}

#header_banner {
        float: right;
        
}

#feed {

	padding: 2px 0px 0 0;

	}

#feed ul { 

        padding: 0px 0 5px 26px;

        margin: 0;

}



#feed ul li { 

        margin: 0;

        padding: 0; 

        list-style-type: none;

}



#feed ul li a { 

        text-decoration: none;

}



#feed ul li a:hover { 

        text-decoration: none;

	color: #000;

	background: #ccc; 

}



#main_content {

	

	float: left;

	width: 921px;

	margin: 0;

	padding: 0 5px;

	background: #ddd;

        height: 100%;

        

	}



#left_column {

	float: left;

	margin: 0;

	width: 611px;

	padding: 10px 0;

	background: #ddd;
 
        height: 100%;


}



#left_left {

	float: left;

	margin: 0;

	width: 300px;

}



#center_column {

	float: right;

	margin: 0;

	width: 300px;

}



#right_column {

	float: right;

	margin: 0px;

	width: 300px;

        background: #ddd;
 
        display: inline;

        

      

}



#single_left {

        width: 190px;

        float: left;

        margin: -10px 0 0 0;

        display: inline;
        
        z-index:1;
}



#single_center {

        float: right;

        margin: 0;

        width: 410px;

}

#single_center h2 {
        background: #fff url(images/transgrey.gif);
}

.navigation {
		margin:10px;
		width: 300px;
                display: inline;
}



.post {

        background: #fff;

        padding: 5px;

}



h1, h2, h4, h5, h6 {

	font-family: "times new roman",serif;
        font-weight: normal;

	color: #33c;

        margin: 0;

        

}



h3 {

        font-weight: normal;

        color: #000;

        margin: 0;

        

}



h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

	font-weight: normal;

	text-decoration: none;

	color: #33c;

	}

h1 { font-size: 2em; }

h2 { font-size: 1.6em; }

h3 { font-size: 1.3em; }

h4 { font-size: 1.2em; }

h5 { font-size: 1.1em; }

h6 { font-size: 1em; }



a {

	color: #33c;

	text-decoration: none;

        border: none;

	}



a:hover {

	color: #000;

	}



img {

        border: none;

}



img a {

        border: none;

}



#featured_post {

	float: left;

	width: 600px;

	border: 1px solid #c60;

	margin: 0px 0 0px 0;

	padding: 5px 5px 5px 5px;

	background: #fff;

        display: inline;

	}

	

#featured_post img {

	float: left;

	width: 300px;

	height: 175px;

	margin: 3px 15px 10px 5px;

        display: inline;

	}

	

#featured_post h2 { 

	margin: 10px 5px 0 0px; 

	padding: 0; 

	font-size: 1.6em; 
        background: #fff url(images/transgrey.gif);

}



#featured_post p {

	margin: 0px 0 0 9px; 

}

#featured_post small {

        color: #c60;

        padding-top: 0;

        margin: 0px 0 0 10px;

}



#recent_posts {

        background: #fff;

        margin: 10px 0 5px 0;

        padding: 5px;

}

#skybanner {
		background: #fff;
		margin: 10px 0 5px 0;
		padding: 5px 10px 5px 10px;
}


#recent_posts h2 {

        background: #fff url(images/transgrey.gif);

}



#recent_posts p {

        font-size: 1.0em;

        margin: 0px 0 0px 9px;

}



#recent_posts li {

        list-style-type: none;
        padding-bottom: 15px;

}



#recent_posts small {

        color: #c60;

        padding-top: 0;

        margin: 0px 0 00px 10px;

}



.bar_item {

        background: #fff;

        margin: 10px 0 5px 0;

        padding: 5px;

}



#footer {

	color: #fff;

	clear: both;

	width: 940px;

	margin: 0 auto;

        background: #ddd;

	}

#footer p {

	float: left;

	width: 50%;

	margin: 0 auto;

	padding: 5px 0;

        display: inline;

	}

	

#footer a {

	color: #ccc;

	font-weight: bold;

	}

#footer a:hover {

	text-decoration: underline;

	}

#footer img { margin: 0 10px; border: none; }



#addendum {

        float: left;

        color: #000;

        margin: 10px 0 10px 0;

        width: 630px;

        display: inline;

}



#addendum a {

        color: #c60;

}



#addendum_left {

        background: #ddd;

        border: 1px solid #c60;

        float: left;

        width: 307px;

}



#addendum_right {

        background: #ddd;

        border: 1px solid #c60;

        float: right;

        width: 307px;

        margin: 0 5px 0 5px;
 
        display: inline;

}



#aside {

        background: #ddd;

        border: 1px solid #c60;

        width: 305px;

        float: right;

        color: #000;

        margin: 10px 0 10px 0;

        display: inline;

}



#aside a {

        color: #c60;

}



#adblock_top {

        margin: 5px;

        height: 125px;

        background: #fff;

        

}



#adblock_bottom {

        margin: 10px 5px 5px 5px;

        height: 125px;   

        background: #fff;    

}



.adblock_left {

        margin: 0 0 0 10px;

        float: left;
 
        display: inline;

}



.adblock_right {

        margin: 0 10px 0 0;

        float: right;

        display: inline;
}



#adblock img {

        width: 125px;

        height: 125px;

        border: none;

}



.tab_result {

        margin: 10px 0 0 0;

        background: #fff;

}



.tab_result ul {

        padding: 40px 0 5px 40px;

        margin: 0;

        

}



.tab_result ul li {

        padding: 0;

}



.subscribe_tab {

        margin: 10px 0 0 0;

        padding: 40px 10px 10px 10px;

        background: #fff;

}



.subscribe_tab a {

        text-decoration: none;

        border: none;

}



.subscribe_tab ul {

        padding: 40px 0 5px 40px;

        margin: 0;

}



.subscribe_tab ul li {

        padding: 0;

}



.sub_left {

        float: left;

}



.sub_left a {

        border: none;

}



.sub_right a {

        border: none;

}



.sub_right {

        float: right;

}



.sub_bottom {

        padding: 65px 0 0 0;

        text-align: center;

} 





ul.domtabs {

	float: left;

	width: 300px;

	list-style-type: none;

	margin: 0;

	padding: 0 0 0 0;

	clear: both;

        background: #ddd;

        

}



ul.domtabs li {

	float: left;

	display: inline;


}



ul.domtabs li a{

	display: inline;

	padding: 5px;

	text-decoration: none;

	color: #000;

	background: #ccc;

}



ul.domtabs li a:hover {

	text-decoration: underline;

}



ul.domtabs li.active a {

	background: #fff;

}

#respond {
        
        margin: 0 auto;
}


#commentform {

        width: 290px;
        margin: 0;
        padding: 0;

}

Code (markup):

 

$5 via paypal for the first person to fix this!!!!

 

Okay, it seems whenever you just go to the page this issue occurs in all the major browsers, FF 2.0.11, Opera 9.25, IE7 (latest update), and Safari 3/win Beta.

I'll have a deeper look, but it seems as if there might be some kind of JavaScript manipulating the CSS.

 

The only javascript that I can think of that would be doing anything like that would be the DOMTABS script. It makes sense though, now that you say that. If you watch the page load (may not be visible on faster connections) the banner disappears at the same time as the java kicks in for the domtabs.

Anyone with DOMTABS experience that can help out with that?

 

yeah cause I looked at the source code, and the div that contains the ad, has an ID of #single_left, and there is no inline-style on that tag. But when you view the code through Firebug in FF, after the ad disappears, there is an inline style declaration of "display: none;". So there is JS that is manipulating that ID some how.

 

Caused by line 55 in domtabs.js

Not sure why it's causing it though.. I'll take a closer look at the script. Are you sure you didn't edit this script at all? Heilmann is supposedly a good coder.. either its a bug in his script or it's some messed up markup on your page.

 

good looking soulscratch!

 

From what I've deduced, it only happens when there is a non-domtabs related # in the URL. So, in this case, when you visit a page with a link to the comment it looks something like /?p=11#comment-3

The java filters on the # and picks the divs that need to disappear based on the "Active" div. With that extra # in there, it somehow decides that the single_left div needs to be disappeared.

I saw one solution that expanded the filter to #td to select with more of a pinpoint, but I couldn't get it to work. All I got was all the tabs displayed. Maybe someone with a little more experience in java can figure it out. Mine is limited to understanding what it does, but not being able to modify it much.