tab text not showing in IE6/7

[tane]

I'm using tab content script v2.0 on my website at www.eatbrunch.net and the text on the tabs is not showing up in IE...but everything fine in FF...any suggestions on how to sort this?

CSS as follows:


.modernbricksmenu2{
padding: 0;
width: 768px;
border-bottom: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 0px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: regular 12px Arial;
color: white;
margin: 0px 2px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: #3366FF; /*Brown color theme*/
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

relevant html is:

<div id="top_outer">
<div id="top_inner">
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Brunch places</a></li>
<li><a href="#" rel="tcontent2">Brunch recipes</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="width:758px; height: 100px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
<br /><?php mosLoadModules ( 'user9', -2); ?><br />
</div>

<div id="tcontent2" class="tabcontent">
<br /><?php mosLoadModules ( 'user10', -2); ?><br />
</div>

</div>


<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>
</div>
</div>
</div>