Menu positioning - images drop down despite display:inline

[jwhittlestone]

Hi All.

I have a problem with the horizontal main nav. I want to include images either side of the UL. I have managed the left image, but the right image drops down to the next line, despite using display:inline for the container div and the ul.

To see what i mean:

http://magazine.foxybingo.com/layout_test/help/

Here is the HTML code
<code>
<div id="nav"><img src="images/fmb_nav_left.gif" align="middle" style="float:left">
<ul>
<li><a href="#">home</a> | </li>
<li><a href="#">life</a> | </li>
<li><a href="#">love</a> | </li>
<li><a href="#">looks</a> | </li>
<li><a href="#">gossip</a> | </li>
<li><a href="#">nice nosh</a> | </li>
<li><a href="#">destiny</a></li>
</ul>
<img src="images/fbm_nav_right.gif" align="middle"></div>
</code>

And here is the relavent css code
<code>
#nav img {display:inline}
#nav ul { padding:0px; width:745px; background-color:#feae04; height:20px}
#nav ul li{display:inline; list-style-type:none}
/* fonts */
#nav ul li a {text-transform:capitalize; color:#000000; text-decoration:none; font-weight:bold; font-size:0.8em}
#nav ul li a:hover {text-decoration:underline}
</code>

Any ideas on why it's dropping down to the next line rather than appearing next to the ul?

any help greatly appreciated
thanks

jon

ps. the css validates and im using transitional dtd

 

[mpartarrieu]

I guess there is a better approach, but this might work also. Try changing your nav div to this:

<div id="nav">
 <img src="images/fbm_nav_right.gif" align="middle" style="float:right">
 <img src="images/fmb_nav_left.gif" align="middle" style="float:left">
 <ul>
  <li><a href="#">home</a> | </li>
  <li><a href="#">life</a> | </li>
  <li><a href="#">love</a> | </li> 
  <li><a href="#">looks</a> | </li> 
  <li><a href="#">gossip</a> | </li>
  <li><a href="#">nice nosh</a> | </li> 
  <li><a href="#">destiny</a></li>
 </ul>
</div>

Hope it helps.

 

[jwhittlestone]

thanks so much! that was easy..

http://magazine.foxybingo.com

problem solved.