CSS float problem

[neo_philiac]

Hello all:

I have this code in html :

	<div id="menu">
     
  		<ul>
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">People</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

And here is the menu css

#menu {
	float: right;
	margin-top: 40px;
	
}

#menu ul {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	list-style: inside;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: right;
	margin-left: 5px;
	padding: 5px 20px;
	background: #FFFFFF;
	text-decoration: none;
	text-transform: uppercase;
	border-top: 2px solid #EBEAD1;
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: bold;
	font-size: 11px;
	color: #182C33;
}

#menu a:hover, .active a {
}

It shows up perfectly on firefox like:

Home  People Contact Links

But in stupid IE

i see double line

Home  People 
Contact Links

Pleaseeeeeeeeeeeee Help!

Thanks

[euphoriastudio]

I believe your problem is the "block" in the display in the "a" tag.

So this needs to be changed:

#menu a {
	display: block;

To this:

#menu a {
	display: inline;

the "#menu a {display: block;}" is most likely conflicting with the "li {display: inline;}" tag. Block is supposed to add a line break before and after the element, so I'm pretty sure this is why you are getting your links in two lines.

[neo_philiac]

It doesnt work. Maybe I should explain more. I have 3 div in a 'header' div. Among those three I have one float to left and two float to right. One of these two is the menu div. But what I was trying to do is to align both of them on the right and then one on top and one at the bottom. . to give you a better understanding :

-----------------------------------------
                             links div   
logo div                                
                                          
                             menu div 
                                          
-----------------------------------------

And the way I separate the two divs on the right is to set margin from top. But unsuccessful so far.

[euphoriastudio]

can you post a link to your site? that way i can view the entire code in context?

[genia]

try
display:block-inline;

[jimbob79]

@neo_philiac:

if you have the menu separated into two separate divs and you are trying to position each div so that they show up correctly, then you need to use "positioning" to align them correctly. Whether you use "absolute" or "relative' positions would be dependent on whether or not the main container "header" div is positioned absolutely or relatively itself.

[neo_philiac]

Sorry for disappearing on you guys but Thank you so much for your responses.


Here is finally a link and the page has the css on it.

http://www.mntp.pitt.edu/Personal%20Pages/test.html


The problem here is that it works perfectly with FF, Opera Chrome etc except for IE (check it yourself in IE7 - the 'menu' comes down because of the menu_header).

Here is the html for the header part .

<div id="header">

        <div id="menu_header">
        	<a href="#">Login</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;
            <a href="#">Site Map</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;
            <a href="">Other link</a>        </div>
	
  <div id="logo">
    <h1><a href="#">This is my web page</a></h1>
			<p><a href="#">Second Header goes here</a></p>
  </div>
    
		<div id="menu">
        
  		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">People</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		</div>
</div>

I would really appreciate if anyone can help.

Thanks