DIV Vertical Alignment off in Firefox

[lxa1801]

Okay, so here is my issue. I have done a W3C validation and the errors I get are mostly alt or shorttag, doesn't appear to be anything connected to this problem.

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:

#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!

[drhowarddrfine]

Okay, so here is my issue. I have done a W3C validation and the errors I get are mostly alt or shorttag, doesn't appear to be anything connected to this problem.

Shorttag errors can be very significant. In addition, they show you are declaring transitional HTML but using XHTML tags. Plus you have a CSS error that needs fixing.

Having a valid web page does not mean your page will display correctly. It only means you used the correct syntax.

Why are you using transitional? New pages have no need for the transitional doctype.

Do not look at Firefox and ask why it doesn't work like old, broken, non-standard IE, but ask why is IE doing not acting like Firefox. Firefox is the standard to follow, never IE.

There is no such thing as "language=javascript". Also, showing the CSS alone does no good but the link you show is all that is needed.

[lxa1801]

Actually I went through this morning and fixed all the validation errors. It is now all validated. Honestly, I took over the site from the original designer as the owners weren't happy with the response time, so I just left the doctype in there as it originally was. Do you have a recommendation as to what it should be? I was reading more about it this morning, but couldn't figure out what doctype I should be using.

What is the CSS error? I can't seem to find it.

I wasn't trying to make it work from what IE has, it's just that oddly enough it does what I want it to do in IE but not in Firefox.

Thanks for the help.

[drhowarddrfine]

Yes, I noticed things had changed compared to what you stated.
Negative numbers are not allowed on padding.

It's more difficult to change the doctype after a page is created. That's why I said "new pages" should not use transitional since the only purpose of that doctype is to allow for deprecated elements. All new pages should always use 'strict' but changing to strict now may change the look of your page.

[lxa1801]

Negative numbers are not allowed on padding.

Oh right, I fixed that. That was actually in the css sheet used for printing. Nevertheless, still encountering the same problem.