Unwanted spacing in FireFox

[Bjornhjorth]

Hello eveyone Still having issues with getting my menu to work just right on both FF and IEThe problem is that FireFox will make a padding of about 2-3 px in the drop down menySite : http://www.topfreegameservers.comcode CSS :

#meny {	position:absolute;	left:50px;	top:400px;	width:763px;	height:52px;	z-index:6;	background-image:url(../images/mmobutton.jpg);	background-repeat:repeat-x;	cursor:pointer;	}#nav, #nav ul {	 	padding: 0;	 	margin: 0;	 	list-style: none;	text-align:left;} #nav a {	 	display: block;	 	width: 123px;	text-align:left;	} #nav li {	float: left;	}#nav li ul {	position: absolute;	width: 123px;	left: -999em;	background-color: #deed85;	text-align:left;	text-decoration:none; 	font: 14px tahoma,verdana,helvetica,sans-serif;			}#nav li:hover ul {	 	left: auto;	text-align:left;	display: block;}#nav li:hover ul, #nav li.sfhover ul {	 	left: auto;	text-align:left;	display: block;		}

and the actual meny

<div id="meny"> <ul id="nav">	  	<li><IMG SRC="../images/menutopsites.jpg" WIDTH="123" HEIGHT="52" BORDER="0"" title="TOP SITES" ><br />	<li><IMG SRC="../images/menummo.jpg" WIDTH="123" HEIGHT="52" BORDER="0" title="Top MMO sites" ><br />	<ul> 	 <li><a href="#">test</a></li>			 	 <li><a href="#">test</a></li>		  	 <li><a href="#">test</a></li> 	 <li><a href="#">test</a></li>			 	 <li><a href="#">test</a></li>		 	 </ul>	 </li>	    	<li><IMG SRC="../images/menuconsole.jpg" WIDTH="123" HEIGHT="52" BORDER="0" title="Top CONSOLE sites" ><br />	<ul>			 	<li><a href="#">PSP</a></li>			 	<li><a href="#">Playstation</a></li>				<li><a href="#">Xbox360</a></li>			 	<li><a href="#">Wii</a></li>		 	</ul>	 	</li>	<li><IMG SRC="../images/menustrategy.jpg" WIDTH="123" HEIGHT="52" BORDER="0" title="Top STRATEGY sites"><br />		  	<ul>				 <li><a href="#">Warcraft</a></li>			 	 <li><a href="#">StarCraft</a></li>			 	 <li><a href="#">command & Conquer</a></li>	   	 </ul>	 	</li>	<li><IMG SRC="../images/menufps.jpg" WIDTH="123" HEIGHT="52" BORDER="0" title="Top FPS sites" ><br/>				<ul>				 <li><a href="#">Gears of War</a></li>			 	 <li><a href="#">Counter Strike</a></li>			 	 <li><a href="#">Battle Field</a></li> 	 <li><a href="#">Unreal Tournament</a></li>			 	 <li><a href="#">FarCry</a></li>		 	 </ul>	 	</li>	<li><IMG SRC="../images/menugamesites.jpg" WIDTH="123" HEIGHT="52" BORDER="0" title="Top GAME sites"><br />		   	<ul>				<li><a href="#">gaming sites</a></li>				 <li><a href="#">currency sellers</a></li>			   	 </ul>	 </li>	   </ul>  </div

PS: dont ask me about the <br> in the meny it just wont work with out it.

[SpOrTsDuDe.Reese]

Don't have time to look through all the code. But please use code boxes!

[Bjornhjorth]

Don't have time to look through all the code. But please use code boxes!

fixed didednt see it when I made it :)A friend of mine told me that Ul and li allways has a padding no matter what and it is IE that is just reading it wrong not giving it padding.He also told me that I have to write a seperate thing like ( if FF then - 4px padding )<-- not what he said for words but just to sum it up.Is this correct or am I having issues with my coding, and that wouldent suprise me

[SpOrTsDuDe.Reese]

Try looking at the codes with Opera or Firefox. Different browsers support different features

[jlhaslip]

to remove margins and padding on all elements on your page, use:

* {margin:0;padding:0;}

then add it where you need/want it.

[Bjornhjorth]

to remove margins and padding on all elements on your page, use:

* {margin:0;padding:0;}

then add it where you need/want it.

tried putting

* {margin:0;padding:0;}

everywere but sadly it dident make a diffrence.

[Synook]

Well you may have to use a conditional stylesheet with negative margins in the FireFox one... or use JavaScript for the condition.

[Bjornhjorth]

Well you may have to use a conditional stylesheet with negative margins in the FireFox one... or use JavaScript for the condition.

yea that is what I am thinking as well, but there is one thing that makes me wonder.As I have been learning and noticed when making webpages is that FF is reading everything 100% accurate and it is explorer that fills in certain gaps in the code with its own premade code and ways to look at the page code.So with the margin 0 and padding 0 I am telling FF that there is supposed to be no margin what so ever. then why is there a margin anyways? ...is there a margin in ul and li by defult just like a <H1> has a margin at the top and bottom by default?sry wanna learn why it does the way it does things and just not only fixing it.

[Synook]

Umm... there is a horrible bug with the menu in Opera, demonstrated by the below image. I think it is caused by the Google adsWell, with the position bug, absolutely setting the submenus' CSS top attribute (to 52px) fixes the problem for FireFox, and should do so for all current browsers except IE 6.

[Bjornhjorth]

Umm... there is a horrible bug with the menu in Opera, demonstrated by the below image. I think it is caused by the Google ads

I had that bug with explorer too but fixed it

[SpOrTsDuDe.Reese]

Write an If condition with Javascipt for each of the different browsers.

[Synook]

Did you try my suggestion?

Absolutely setting the submenus' CSS top attribute (to 52px) fixes the problem for FireFox, and should do so for all current browsers except IE 6.

But I suppose you will still need conditional for IE 6 then.

[Bjornhjorth]

Did you try my suggestion?But I suppose you will still need conditional for IE 6 then.

made a new meny with a new issue in explorer so a new topic http://w3schools.invisionzone.com/index.php?showtopic=16650