I have a div, that houses 2 unordered lists.
The lists need to be side by side, but at opposite ends, so that there is a space, if any, in the middle.
I've got it looking correct in IE, but FF places the right hand UL one line lower than they left. they need to be on the same line.
Here is what I have:
The lists need to be side by side, but at opposite ends, so that there is a space, if any, in the middle.
I've got it looking correct in IE, but FF places the right hand UL one line lower than they left. they need to be on the same line.
Here is what I have:
Code:
#subnavinfo
{
margin: 0 auto;
width: 954px;
background-color: #f0f0f0;
border-right: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
font-size: 11px;
padding: 6px 0;
/*margin-top:expression(-2+"px"); causing problems in IE Win*/
}
#subnavinfo ul
{
list-style: none;
margin: 0;
padding: 0 10px 0 0;
overflow: hidden;
}
#subnavinfo ul.r li
{
clear: none;
float: right;
}
#subnavinfo ul li a
{
padding: 0 0.7em;
}
#subnavinfo ul li a.hedge
{
padding: 0 0.7em;
}
#subnavinfo span
{
float: left;
padding: 0 0 0 12px;
}
#subnavinfo ul.l li
{
clear: none;
float: left;
}
Code:
<div id="subnavinfo">
<ul class="l">
<%call sForumNavigation()%>
</ul>
<ul class="r">
<li>
<a title="Billiard Directory" href="[URL unfurl="true"]http://dev.info/billiard-books.asp"[/URL] class="hedge">
Billiard Books</a>
</li>
<li>
<a title="Pool Halls" href="[URL unfurl="true"]http://dev.info/pool-halls.asp">[/URL]
Pool Halls</a>
</li>
<li>
<a title="Pool Tournaments" href="[URL unfurl="true"]http://dev.billiardsforum.info/pool-tournaments.asp">[/URL]
Pool Tournaments</a>
</li>
<li>
<a title="Billiard Directory" href="[URL unfurl="true"]http://dev.info/billiard-articles/billiard-movies.asp">[/URL]
Billiard Movies</a>
</li>
<li>
<a title="Billiards Video" href="[URL unfurl="true"]http://dev.info/billiards-video.asp">[/URL]
Billiards Video</a>
</li>
</ul>
</div>