7 replies [Last post]
grobar
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-02-18
Posts: 6
Points: 0

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:

#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;
}

<div id="subnavinfo">
	<ul class="l">
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-books.asp" class="hedge" rel="nofollow">
			Billiard Books</a>
		</li>
		<li>
			<a title="Pool Halls" href="http://dev.info/pool-halls.asp" rel="nofollow">
			Pool Halls</a>
		</li>
	</ul>
	<ul class="r">	
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-books.asp" class="hedge" rel="nofollow">
			Billiard Books</a>
		</li>
		<li>
			<a title="Pool Halls" href="http://dev.info/pool-halls.asp" rel="nofollow">
			Pool Halls</a>
		</li>
		<li>
			<a title="Pool Tournaments" href="http://dev.billiardsforum.info/pool-tournaments.asp" rel="nofollow">
			Pool Tournaments</a>
		</li>
		<li>
			<a title="Billiard Directory" href="http://dev.info/billiard-articles/billiard-movies.asp" rel="nofollow">
			Billiard Movies</a>
		</li>
		<li>
			<a title="Billiards Video" href="http://dev.info/billiards-video.asp" rel="nofollow">
			Billiards Video</a>
		</li>
	</ul>
</div>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why are you floating the

Why are you floating the list elements within the ul? float the actual ul elements themselves.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

grobar
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-02-18
Posts: 6
Points: 0

Hello, Thanks for the

Hello,

Thanks for the reply. The LI are floated because the lists need to be displayed horizontally along one line, and not vertically.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That may be the case but

That may be the case but they are still contained within two seperate ul elements so you will need to float those as well, no?

ul are block level if you don't float them the second ul will start on the next clear line.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

grobar
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-02-18
Posts: 6
Points: 0

yes, had to float them.

yes, had to float them. Thanks for the point in the right direction.

NOW - the outer div displays 2 pixels shorter in IE7, any ideas?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Possibly hasLayout? have the

Possibly hasLayout? have the elements got dimensions? what happens if you set widths or use neutral but non-valadating zoom:1; to test for the horror.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

grobar
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-02-18
Posts: 6
Points: 0

Thanks for the reply. none

Thanks for the reply.

none of that seemed to work.

i do have width applied. (total should be 956px, so the div is 954 plus 1px border on each side.)

grobar
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2007-02-18
Posts: 6
Points: 0

actually a misplaced char

actually a misplaced char threw me in to quirks mode. all fixedx, and thnaks for the help