Comments Box, Used in a DIV overlay... Options

[lambeausouth923]

Hey guys...

I'm building a DIV overlay template that I will use on several sites. The framework (well, DIV layout) will be consistent. The visual elements (graphic art, CSS text elements etc) will of course be different on each..

Here's the basic coding as it stands now. I am utilizing the DIV overlay 1.0 from here on the forum instead of a DIV generator. As I become better with understanding the stupid hierarchy of myspace tables, I won't need that crutch (but it is greatly appreciated for now as I learn!). I have modified it. (I removed one of the hidden elements, I believe it was DIV TABLE TABLE...because it causes the ad to disappear (also discussed on this forum a while ago...)

CODE

/ *ABOUT ME* /



<style type="text/css">

body {background-color:000000;}

table table,table table table table,table table{background-color:transparent;width:;border:0px;}


div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}

a.navbar
,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}


div table form tr td,td.text table,a.text, table div font a,{visibility:hidden;di-splay:none}


table td table tr td.text table {visibility:hidden;}


table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}


td.text table table {display:inline; visibility:visible;}


embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}


.container{visibility:visible;width:1024px;height:768px; position:absolute; top:0px; margin-top:130px;
left:50%; margin-left:-512px;overflow:auto;background-color:transparent; border:none; border-color:BEBEBE; z-index:3; padding:0px;}

.div1{visibility:visible;width:304px; height:768px;position:absolute;
top:0px;left:50%; margin-left:-512px;
overflow:auto;background-color:FFD700;
border:none;z-index:2; padding:0px;}

.div2{visibility:visible;width:720px; height:384px;position:absolute;
top:0px;left:50%; margin-left:-208px;
overflow:auto;background-color:96CDCD;
border:none;z-index:2; padding:0px;}

.div3{visibility:visible;width:360px; height:384px;position:absolute;
top:384px;left:50%; margin-left:-208px;
overflow:auto;background-color:584E56;
border:none;z-index:2; padding:0px;}

.comments{visibility:visible;width:360px; height:384px;position:absolute;
top:384px;left:50%; margin-left:152px;
overflow:auto;background-color:EDEDED;
border:none;z-index:2; padding:0px;}

</style>




/* I'D LIKE TO MEET */

<div class="container">

<div class="div1">
Left column will be transparent to allow background image to bleed thru
</div>

<div class="div2">
Top row will include navigation and information about me
</div>

<div class="div3">
This is the interior column. Pictures and videos will go here
</div>



<div class="comments"><table><tr><td><table><tr><td>

I've built one container DIV, and embedded 4 other divs within, the last is the comments section.

In Firefox, it nests perfectly. It automatically corrects the DIV so there's no horizontal scroll bar.

IE does not. There is my quandry.

How do I adjust the comments DIV so that it will appear uniformly in both browsers??



Thanks, guys. I'm loving this site so far. Once you get me going, I'll never shut up! :)

Here's the link:

http://www.myspace.com/theater_dreamer