I created this floating menu in IE and it worked fine. When I went to test it on different browsers such as firefox, camino, safari, etc.. Extra space appears to the left of the links and I cannot figure out how to fix it! CSS is as follows: a.item{color:black;text-decoration:none;padding:0px} a:visited.item{color:black;text-decoration:none} a:hover.item{color:red} a:active.item{color:red} #frame{position:absolute;top:0px;left:0px;display:block} #items{position:relative;left:0px;top:0px;background:#999999;font-weight:bold;white-space:nowrap; font-size:14pt;margin:0px;border:1px solid black; list-style-type:none} #tab{font-weight:bold;width:20px; background:#999999; font-size:5pt;margin:0px;border:1px solid black;padding:0px} The code for the table is: <table id="frame" cellpadding='0' border='0' cellspacing='0'> <tr> <td align='left'> <ul class="items" id="items"> <li><a class="item" href="#">Link 1</a></li> <li><a class="item" href="#">Link 2</a></li> <li><a class="item" href="#">Link 3</a></li> <li><a class="item" href="#">Link 4</a></li> <li><a class="item" href="#">Link 5</a></li> </ul> </td> <td> </td> <td> <table id="tab" class="tab" onclick="changeMenu();"> <tr> <td>click </td> </tr> </table> </td> </tr> </table> any ideas on how to get rid of the space?
What rulesets have you applied to ul and li? Are you in quirks or standards mode? The source you've posted is insufficient to do more than throw guesses at. Give us a link if you can, otherwise post the complete document source. Use [code][/code] tags around posted code to maintain formatting. cheers, gary
Sorry, I dont really know much about css. But this is what I came up with from surfing around. Here is all of my code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>menu</title> <style type="text/css"> a.item{color:black;text-decoration:none;padding:0px} a:visited.item{color:black;text-decoration:none} a:hover.item{color:red} a:active.item{color:red} #frame{position:absolute;top:0px;left:0px;display:block} #items{position:relative;left:0px;top:0px;background:#999999;font-weight:bold;white-space:nowrap; font-size:14pt;margin:0px;border:1px solid black; list-style-type:none} #tab{font-weight:bold;width:20px; background:#999999; font-size:5pt;margin:0px;border:1px solid black;padding:0px} </style> <script language"JavaScript"> var menuFrm, menuTab, left, minimized=false; var itmWidth, tabWidth, startY=0; var top = 0, left = 0; //calls the moveMenu() method when the window is scrolled window.onscroll = moveMenu; //returns the width of the object passed in function getWidth(obj) { return obj.offsetWidth; } //hides or shows the menu function changeMenu() { //updates the x and y offsets getScrollXY(); if (!minimized) { //left side of menu is far enough offscreen //to only show the button menuFrm.style.left = left - (itmWidth - tabWidth); minimized = true; } else { //whole menu is shown menuFrm.style.left = left; minimized = false; } } function moveMenu() { //updates the x and y offsets getScrollXY(); if (minimized) { //moves the minimized menu by the left offset menuFrm.style.left = left - (itmWidth - tabWidth); } else { //moves the menu by the left offset menuFrm.style.left = left ; } //moves the top of the menu by the offsets menuFrm.style.top = top + startY; } function Init() { menuFrm=document.getElementById('frame'); menuTab=document.getElementById('tab'); tabWidth=getWidth(menuTab); itmWidth=getWidth(menuFrm); //sets inital vertical position of the menu menuFrm.style.top = startY; } function getScrollXY() { top = 0; left = 0; if( typeof( window.pageYOffset ) == 'number' ) { //Netscape compliant top = window.pageYOffset; left = window.pageXOffset; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { //DOM compliant top = document.body.scrollTop; left = document.body.scrollLeft; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { //IE6 standards compliant mode top = document.documentElement.scrollTop; left = document.documentElement.scrollLeft; } } </script> </head> <body id="body" onload="Init()"> <div id="whole"> <table id="frame" cellpadding='0' border='0' cellspacing='0'> <tr> <td align='left'> <ul class="items" id="items"> <li><a class="item" href="#">Link 1</a></li> <li><a class="item" href="#">Link 2</a></li> <li><a class="item" href="#">Link 3</a></li> <li><a class="item" href="#">Link 4</a></li> <li><a class="item" href="#">Link 5</a></li> </ul> </td> <td> </td> <td> <table id="tab" class="tab" onclick="changeMenu();"> <tr> <td>click </td> </tr> </table> </td> </tr> </table> </div> </body> </html> Code (markup):
The ul uses either margin or padding to indent. IE and Opera use {margin-left: 40px;}, while The Moz/Gecko family and Safari/Konqueror use {padding-left: 40px;}. You zeroed the margin, which took care of IE and Opera, but you must also zero the padding. ul { background-color: #999; border: 1px solid black; font-size: 14px; font-weight: bold; list-style: none; margin: 0; padding: 0; whitespace: nowrap; } #frame { border-collapse: collapse; } Code (markup): Note, too, that a new document should have a strict DTD and trigger standards mode. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Code (markup): cheers, gary