Jump to content

Unwanted spacing in FireFox


Bjornhjorth
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 :)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. :)
Link to comment
Share on other sites

Umm... there is a horrible bug with the menu in Opera, demonstrated by the below image. I think it is caused by the Google adstfgs_menubug_opera.pngWell, 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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...