maxudaskin Posted September 17, 2007 Share Posted September 17, 2007 http://www.virtualzoom.net/menutest.php Why does it keep showing the extra 20 (appx) pixals above and below the menu? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <?php include("include/loginscript.php"); ?> <table height="20" width="1010" border="0" cellpadding="0" cellspacing="0" bgcolor="#333355"> <tr height="20"> <td width="202" height="20"> <ul class="makeMenu"><li><a href="../index_2.php">Home</a></li></ul> </td> <td width="202" height="20"><ul class="makeMenu"> <li> <a href="../hr/index.php">Human Resources</a> <ul> <?php if(!$logged_in){ echo '<li><a href="../hr/apply.php?p=terms">Job Application</a></li>'; echo '<li><a href="../hr/apply.php?p=positions">Open Positions</a></li>'; echo '<li><a href="../hr/legal.php">Legal</a></li>'; }else{ echo '<li><a href="../hr/edit.php?p=profile">Change Profile</a></li>'; echo '<li><a href="../hr/edit.php?p=loa">Leave of Absense</a></li>'; echo '<li><a href="../hr/edit.php?p=resign">Resign</a></li>'; } ?> </ul> </li> </ul></td> <td width="202" height="20"><ul class="makeMenu"> <li><a href="../ops/index.php">Operations</a> <ul> <?php if(!$logged_in){ echo '<li><a href="../ops/fleet.php">Hanger</a></li>'; echo '<li><a href="../ops/flightmap.php">Flight Map</a></li>'; echo '<li><a href="../ops/hubs.php">Hubs</a>'; echo '<ul>'; echo '<li><a href="../ops/hubs.php?h=cyyz">Toronto - CYYZ,YYZ</a></li>'; echo '<li><a href="../ops/hubs.php?h=cyvr">Vancouver - CYVR,YVR</a></li>'; echo '<li><a href="../ops/hubs.php?h=egkk">Gatwick - EGKK,LGW</a></li>'; echo '</ul></li>'; }else{ echo '<li><a href="../ops/fleet.php">Hanger</a></li>'; echo '<li><a href="../ops/apply.php?p=terms">Routes</a></li>'; echo '<li><a href="../ops/logbook.php?action=book">Book Flight</a></li>'; echo '<li><a href="../ops/logbook.php?action=file">File Flight</a></li>'; echo '<li><a href="../ops/logbook.php">View Filed Flight</a></li>'; echo '<li><a href="../ops/hubs.php">Hubs</a>'; echo '<ul>'; echo '<li><a href="../ops/hubs.php?h=cyyz">Toronto - CYYZ,YYZ</a></li>'; echo '<li><a href="../ops/hubs.php?h=cyvr">Vancouver - CYVR,YVR</a></li>'; echo '<li><a href="../ops/hubs.php?h=egkk">Gatwick - EGKK,LGW</a></li>'; echo '</ul></li>'; } ?> </ul> </li> </ul></td> <td width="202" height="20"><ul class="makeMenu"> <li><a href="../info/index.php">Airline Information</a> <ul><li><a href="../info/staff.php">Staff</a></li> <li><a href="../info/mission.php">Mission</a></li> <li><a href="../info/stats.php">Statistics</a> <ul> <li><a href="../info/stats.php#route">Flight Statistics</a></li> <li><a href="../info/stats.php#flight">PIREP Statistics</a></li> <li><a href="../info/stats.php#pilot">Pilot Statistics</a></li> </ul></li> </ul> </li> </ul></td> <td width="202" height="20"><ul class="makeMenu"> <li><a href="../comm/index.php">Communication</a> <ul> <li><?php echo '<a href="teamspeak://8.9.6.26:8810/?channel=Virtual Zoom Airlines?channelpassword=zoomzoom'; if($logged_in){ echo '?nickname='; echo $_SESSION['username']; echo ' '; echo $_SESSION['name']; } echo '">Teamspeak</a>'; echo '</li>'; ?> </li><li><a href="../comm/forum.php">Forum</a></li> <li><a href="../comm/contact.php">Contact Form</a></li> </ul> </li> </ul></td> </tr> </table> </body> </html> Above is the page and below is the CSS <style type="text/css"> ul.makeMenu, ul.makeMenu ul { width: 202px; /* sets the size of the menu blocks */ border: 0px solid #000; /* puts a black border around the menu blocks */ background-color: #333355; /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */ padding-left: 0px; /* stops the usual indent from ul */ cursor: default; /* gives an arrow cursor */ margin-left: 0px; /* Opera 7 final's margin and margin-box model cause problems */ text-align:center; /* Places the text in the center of the Div tag */ padding-top: 0px; padding-bottom: 0px; line-height: 20px; } ul.makeMenu li { list-style-type: none; /* removes the bullet points */ margin: 0px; /* Opera 7 puts large spacings between li elements */ position: relative; /* makes the menu blocks be positioned relative to their parent menu item the lack of offset makes these appear normal, but it will make a difference to the absolutely positioned child blocks */ color: #fff; /* sets the default font colour to white */ } ul.makeMenu li > ul { /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */ display: none; /* hides child menu blocks - one of the most important declarations */ position: absolute; /* make child blocks hover without leaving space for them */ top: 22px; /* position slightly lower than the parent menu item */ left: 0px; /* this must not be more than the width of the parent block, or the mouse will have to move off the element to move between blocks, and the menu will close */ } ul.makeMenu li:hover, ul.makeMenu li.CSStoHighlight { background-color: #333366; /* gives the active menu items a dark blue background */ color: #fff; /* makes the active menu item text white */ } ul.makeMenu ul.CSStoShow { /* must not be combined with the next rule or IE gets confused */ display: block; /* specially to go with the className changes in the behaviour file */ } ul.makeMenu li:hover > ul { /* one of the most important declarations - the browser must detect hovering over arbitrary elements the > targets only the child ul, not any child uls of that child ul */ display: block; /* makes the child block visible - one of the most important declarations */ } /* and some link styles */ ul.makeMenu li a { color: #fff; display: block; width: 100%; text-decoration: none; padding-top: 1px; padding-bottom: 1px; } ul.makeMenu li a:hover, ul.makeMenu li a.CSStoHighLink { color: #fff; } ul.makeMenu li:hover > a { color: #fff; } /* supports links in branch headings - should not be display: block; */ </style> <!--[if gt IE 5.0]><![if lt IE 7]> <style type="text/css"> /* that IE 5+ conditional comment makes this only visible in IE 5+ */ ul.makeMenu li { /* the behaviour to mimic the li:hover rules in IE 5+ */ behavior: url( IEmen.htc ); } ul.makeMenu ul { /* copy of above declaration without the > selector, except left position is wrong */ display: none; position: absolute; top: 20px; left: 0px; } </style> <![endif]><![endif]--> Quote Link to comment Share on other sites More sharing options...
freakstyle Posted September 17, 2007 Share Posted September 17, 2007 sorry but this is a php forum, that is why no one is really looking into it for ya. good luck Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 18, 2007 Share Posted September 18, 2007 Freakstyle, that is not correct. While this is a php forum, the posting was in the html/css/jscript threads. There is almost as much activity in straight css here as in php. Sometimes we just don't quickly get to those that use table based layout, though ... because tables should NOT be used for layout! In this particular case, he is using old html invalid table styling within the markup itself. All table styling should be in the css. There is NO valid attribute called "<tr height="20">" in XHTML. That is another reason why tables should not be used as a layout (particularly when using an XHTML doctype). But if you MUST use tables for layout, change your doctype to html 4.0 transitional (even html 4 strict hates tables), and ad the style command properly within the table tags ... like so: BAD: <table height="20" width="1010" border="0" cellpadding="0" cellspacing="0" bgcolor="#333355"> <tr height="20"> <td width="202" height="20"> GOOD: <table style="height:20px; width:1010px; border:0; padding:0; background-color:#333355"> <tr style="height:20px"> <td style="height:20px; width:202px"> Lose the height tag. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 18, 2007 Share Posted September 18, 2007 I shouldn't even give advice for css when it uses tables for layout (which is most likely why my css comrades here didn't reply), but I wanted to respond to freakstyle's incorrect post. Learn to use css properly and layout your design without tables. Tables should ONLY be used for display of true "tabular" data, not layout. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.