Bjornhjorth Posted November 14, 2007 Share Posted November 14, 2007 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 More sharing options...
SpOrTsDuDe.Reese Posted November 15, 2007 Share Posted November 15, 2007 Don't have time to look through all the code. But please use code boxes! Link to comment Share on other sites More sharing options...
Bjornhjorth Posted November 15, 2007 Author Share Posted November 15, 2007 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 More sharing options...
SpOrTsDuDe.Reese Posted November 16, 2007 Share Posted November 16, 2007 Try looking at the codes with Opera or Firefox. Different browsers support different features Link to comment Share on other sites More sharing options...
jlhaslip Posted November 17, 2007 Share Posted November 17, 2007 to remove margins and padding on all elements on your page, use: * {margin:0;padding:0;} then add it where you need/want it. Link to comment Share on other sites More sharing options...
Bjornhjorth Posted November 20, 2007 Author Share Posted November 20, 2007 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. Link to comment Share on other sites More sharing options...
Synook Posted November 21, 2007 Share Posted November 21, 2007 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 More sharing options...
Bjornhjorth Posted November 22, 2007 Author Share Posted November 22, 2007 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 More sharing options...
Synook Posted November 23, 2007 Share Posted November 23, 2007 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. Link to comment Share on other sites More sharing options...
Bjornhjorth Posted November 23, 2007 Author Share Posted November 23, 2007 Umm... there is a horrible bug with the menu in Opera, demonstrated by the below image. I think it is caused by the Google adsI had that bug with explorer too but fixed it Link to comment Share on other sites More sharing options...
SpOrTsDuDe.Reese Posted November 26, 2007 Share Posted November 26, 2007 Write an If condition with Javascipt for each of the different browsers. Link to comment Share on other sites More sharing options...
Synook Posted November 27, 2007 Share Posted November 27, 2007 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 More sharing options...
Bjornhjorth Posted November 28, 2007 Author Share Posted November 28, 2007 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.