You can view the site at www.michiganequality.org/index.htm
Basically, the site views properly in IE, however, in Firefox the rightsidemain div does not align back at the top of the containerbody div, but rather aligns where the leftside div left off.
Now, the site was working properly until I changed some code regarding the flash menu. I wanted it to be more accessible to those without flash and for SEO and utilized SWFObject to display alternate content when flash was not detected. Once I did that, however, this problem showed up.
Here is the CSS code:
CODE
#containerbody {
display: table;
position: relative;
text-align: center;
background-image: url('http://www.michiganequality.org/siteimages/columngif.gif');
padding: 0px 0px 0px 0px;
margin: 0 auto;
width: 893px;
height: 100%;
}
#leftside {
float:left;
background: #000000;
padding: 0px 0px 0px 0px;
margin: 0 auto;
width: 139px;
}
#rightside {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
font-size: 11px;
line-height: 19px;
color: #000000;
float:right;
text-align: left;
background: #ffffff;
padding: 23px 33px 21px 33px;
width: 688px;
}
.rightside2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 8px 0px 0px 0px;
font-size: 11px;
line-height: 19px;
color: #000000;
}
#rightsidemain {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 auto;
font-size: 11px;
line-height: 19px;
color: #000000;
float:right;
text-align: left;
vertical-align: top;
background: #ffffff;
padding: 0px 0px 0px 0px;
width: 754px;
}
The HTML calls forth containerbody, then leftside within. Within leftside it calls the alternate div for the flash menu, then closes both the alternate and leftside and open the rightsidemain div. Finally closing both rightsidemain and containerbody div.
Any ideas why the rightsidemain is not aligning to the top? I'm stumped. Thanks in advance!
