How can i fix this problem?

My menu in IE it fits fine but in Firefox its like the image below



The Html im useing:
<div id="menu2">
<ul>
<li>&nbsp; - <a href="pages/downloads/">Downloads</a></li>
<li>&nbsp; - <a href="pages/sitedesigners.php">Site Designers</a></li>
<li>&nbsp; - <a href="pages/sitesrules.php">Site Rules</a></li>
<li>&nbsp; - <a href="pages/ourwork.php">Our Work</a> </li>
<li>&nbsp; - <a href="pages/htmlcodes.php">Html Codes</a></li>
</ul>
</div>

My css im useing is:
#menu2 {
width:144px;
float:left;
color:#000000;
border:1px #aaabaa solid;
margin-left:1px;
margin-top:2px;
margin-bottom:1px;
padding:0;
position: absolute; }

#menu2 li {
list-style:none;
height:24px;
text-align:left;
margin:1px;
left:0;
float:left;
width:144px;
padding:2px;
background-image:url('../images/li-bk.jpg');
background-repeat:no-repeat; }

#menu2 ul {
margin:0 -0px 0 0;
text-align:left; }

How can i fix this guys?

 

have you tried removing the &nbsp; option?

 

Yes still does it

 

Right before the code put something like this :

<!--[if IE6]>
<style type="text/css">
#menu2 li {
margin-left:-50px;
(and all the other junk if u need to)
}
</style>
<![endif]-->

This spits out css that only IE6 will see. Play with it and see if you can get it fixed. I use this stuff all the time to fix IE bugs. No other browser will render the code. This gives IE6 it's own little special CSS to make it suck a little less.

Hopefully this helps.

 

Still does it and the problem is with firefox

 

and thanks you two

 

Sorry, I misread the OP.

 

The div wrapping the ul element is useless. The following worked for me in IE7 and Firefox.

HTML

<ul id="menu2">
	<li>&nbsp; - <a href="pages/downloads/">Downloads</a></li>
	<li>&nbsp; - <a href="pages/sitedesigners.php">Site Designers</a></li>
	<li>&nbsp; - <a href="pages/sitesrules.php">Site Rules</a></li>
	<li>&nbsp; - <a href="pages/ourwork.php">Our Work</a> </li>
	<li>&nbsp; - <a href="pages/htmlcodes.php">Html Codes</a></li>
</ul>

Code (markup):

CSS

#menu2 {
	position: absolute;
	float:left;
	width:144px;
	color:#000;
	border:1px solid #aaabaa;
	margin: 2px 0 1px 1px;
	padding:0;
	text-align:left;
 }
#menu2 li {
	list-style:none;
	height:24px;
	text-align:left;
	margin:1px;
	left:0;
	float:left;
	width:144px;
	padding:2px;
	background-image:url('../images/li-bk.jpg');
	background-repeat:no-repeat;
}

Code (markup):

Also, instead of using

 

HTML:

, use CSS to add left padding to the li. Try something like this.

#menu2 li a {
	padding-left: 5px;
}

Code (markup):

Let me know how that worked.

 

position: absolute; - there's 99.999999999% of the problem right there. If you have to use absolute positioning to place your menu, you are probably doing something WRONG. Position:absolute + float:left - REALLY wrong. On the LI left:0 without a position value, also wrong.

From the css snippet, I'd say you have bigger layout issues than just the menu being out of place.

 

I'll try now and i used position: absolute; to see if it would help but it didnt

 

THANK YOU martinmarzejon youve saved me hours of stress altho i had some already lol, Could you exsplane to me what it was and how you done it for the future?

and thanks again!