Hi,
You have several problems with the way you have set up your html.
Here is what you have:
<div id="content-wide">
[COLOR=Red]<h2>Resources</h2>[/COLOR]
<div id="col-left">
<p class="boa">[COLOR=Red]<a href="#"><h1>BOA Dual [TLSO Bracing]</h1><span><p class="tip"></p></span></a>[/COLOR]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>
<p class="ossur">[COLOR=Red]<a href="#"><h1>OSSUR [TLSO Bracing]</h1><span><p class="tip"></p></span></a>[/COLOR]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>
</p>
</div><!-- col-left -->
<div id="col-right">
<p class="spinalux"><a href="#"><h1>SpinaLux [TLSO Bracing]</h1><span><p class="tip"></p></span></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>
<p class="ace"><a href="#"><h1>Ace Brace [Hyper Extension Bracing]</h1><span><p class="tip"></p></span></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/><br/>
</p>
</div><!-- col-left -->
</div><!-- content -->
For starters you have your heading structures set up wrong, You have an H2 that is leading into multiple H1’s. It needs to be the other way around: One H1 leading into multiple H2’s.
You can’t nest block level headings inside of a span or any other inline element. You have it backwards, the anchor needs to nest inside what should be the H2. Then the span gets nested within that. Then the paragraphs should follow the H2, you were trying to nest the headings in your paragraphs.
There are other errors as well, missing closing </p> tags etc. Firefox was probably just correcting those things for you.
Your html should be set up something like this and then adjust the CSS accordingly:
<div id="content-wide">
[COLOR=Blue]<h1>Resources</h1>[/COLOR]
[B]<div id="col-left">[/B]
[COLOR=DarkGreen]<h2 class="boa">[/COLOR][COLOR=Blue]<a href="#">BOA Dual [TLSO Bracing]<span class="tip"></span></a>[/COLOR][COLOR=DarkGreen]</h2>[/COLOR]
[COLOR=Blue]<p>[/COLOR]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[COLOR=Blue]</p>[/COLOR]
[COLOR=DarkGreen]<h2 class="ossur">[/COLOR][COLOR=Blue]<a href="#">OSSUR [TLSO Bracing]<span class="tip"></span></a>[/COLOR][COLOR=DarkGreen]</h2>[/COLOR]
[COLOR=Blue]<p>[/COLOR]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[COLOR=Blue]</p>[/COLOR]
[B]</div>[/B]
<div id="col-right">
<h2 class="spinalux"><a href="#">SpinaLux [TLSO Bracing]<span class="tip"></span></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2 class="ace"><a href="#">Ace Brace [Hyper Extension Bracing]<span class="tip"></span></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div><!-- content -->
You should be able to eliminate the classes on those spans too.
Just target the spans by their parent H2.
It looks like those H2’s could actually have an ID associated with them since they would be unique.