Jump to content
Sign in to follow this  
Bjornhjorth

Unwanted spacing in FireFox

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.

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

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

* {margin:0;padding:0;}

then add it where you need/want it.

Share this post


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

Share this post


Link to post
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.

Share this post


Link to post
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. :)

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...