Aligning problem

Works in Firefox, not in IE

[Jim123]

In my category bar I want to put some words before the categories. Putting it in front of it is not a problem, but aligning...

Can anyone help me?

<div id="catmenucontainer">
<div id="catmenu">
<ul>
<h7>Read topics:</h7>
<?php wp_list_categories('sort_column=name&title_li=&depth=4&exclude='); ?>
</ul>
</div>
</div>

*****************************************

#catmenucontainer{
height:30px;
background:url(images/catmenu.png);
display:block;
padding:0px 0 0px 0px;
font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
 text-transform:uppercase;
overflow:hidden;

}

#catmenu{
margin: 0px;
padding: 0px 10px;
width:980px;
background:url(images/catmenu.png) ;
height:30px;

}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu h7 {
float: left;
list-style: none;
padding: 0px;
margin: 9px 0px 0px 10px;
font: 10px Tahoma,century gothic,Georgia,sans-serif;
color:#000000;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #2B74AF;
display: block;
margin: 0px;
padding: 9px 10px 9px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:#2B74AF;
color: #fff;
 margin: 0px;
padding: 9px 10px 9px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(images/catmenug.png) ;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 9px 10px;
border-bottom: 1px solid #2C3F4F;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:#152839;
color: #fff;
padding: 9px 10px 9px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li { 
}

#catmenu li ul a { 
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active { 
}

#catmenu li ul ul {
margin: -31px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul, 
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul, 
#catmenu li li li:hover ul, #catmenu li.sfhover ul, 
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover { 
position: static;
}

[rocknbil]

Start with validating your pages [validator.w3.org]. This is not valid (X)HTML:

<ul>
<h7>Read topics:</h7>
<?php wp_list_categories('sort_column=name&title_li=&depth=4&exclude='); ?>
</ul>

There can be nothing between the <ul></ul> but list items. Moving the h+ into the <li> is invalid too. And I am *pretty sure* heading levels only go down to 6, there is no h7 (could be wrong on that one?)

[Jim123]

Yes, you are right, but it gave a result the nearest what I want.

So my question would be more: how to divide the menu into two so that the first part is text and the second part are links?

[Jim123]

Managed to divide the menu bar, rest was easy.

Thanks