Looks good on Chrome & IE…Bad on Firefox?

Question

I know its my fault. I know by the way the height is working correctly with the packages and that I offset the problem (just to get a design done) by using a bunch of breaks (br tags) lol.

Anyways, the site looks exactly how I want it to in chrome (minus the breaks (br tags) hack)...In firefox, its a mess. It actually looks good on IE...but not functional -.-

Will take me a good 2-3 hours of tweaking and changing tid bits of the CSS. Would take a CSS expert 5 minutes, so I came to ask what the heck is going on? Is chrome just really forgiving of my bad coding or is firefox confused?

My main concern right now is getting everything to look the same, and properly (none of those breaks (br tags) hacks). Then I will focus on getting IE functional later.

Here is the site.

Answer 1

To fix the Payment Section in firefox i have modified your html as follows-

<div class="Savings0 custom-radio-Length"><label style="border:white;">&nbsp;</label></div>
<div class="Savings3 custom-radio-Length"><label style="border:white;">15% off Total <br/> Save $1.35</label></div>
<div class="Savings6 custom-radio-Length"><label style="border:white;">20% off Total <br/> Save $3.60</label></div>
<div class="Savings12 custom-radio-Length"><label style="border:white;">25% off Total <br/> Save $9.00</label></div>

Answer 2

After going through the validation as Sotiris suggested, I realized that having block elements in an inline element was causing firefox trouble.

I had DIV's and H3's in label tags, which is why it got messed up. Weird that IE8, Chrome, Safari still displayed OK...But firefox got weird. I understand its valid for firefox to get weird because it was against the rules to do so, but it should be more forgiving about that.

I replaced using H3 with a span that had similar formatting that I wanted, and also replaced the DIVs I had as containers to inject HTML using javascript and instead just appended the HTML instead of looking for a DIV.