Trying to figure out why I have a gap between Div's. I have a drop down menu (CSS) that works fine on a separate page and works on the page I have it on now. The problem is that there is a gap between the top DIV and the navigation. I have tried several ways that I know of to fix it, but none have worked.
Any help you could give would be greatly appreciated. Here is the whole code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; lang="en"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <title>Tourism</title> <style type="text/css"> /* commented backslash hack v2 \*/ html, body{height:100%;} /* end hack */ body { padding:0; margin:0; color: #000; text-align:center; } #outer{ min-height:100%; width: 99%; color: #000000; margin:auto; text-align:left; position:relative; } #outer p {padding-left:6px; padding-right:6px} * html #outer{height:100%} #header { background:#fff url(images/valtour_top.png) no-repeat; height:250px; } #footer { width:100%; clear:both; height:50px; border-top:1px solid #000; border-bottom:1px solid #000; background-color: #006666; color: #fff; text-align:center; left:0; bottom:0; position: absolute; padding-top: 10px; } #nav { background-color: #006666; //border-bottom:1px solid #000; text-align:left; height:30px; } /* Clear Both needed to make room for footer*/ #clearfooter{clear:both;height:40px;} #main { width:80%; margin:0px auto; text-align:left; padding:15px; border:1px dashed #333; background-color:#eee; } /* This is the navigation menu */ #menu_bg { width:100%; background: #006666; margin:0px auto; } #menu { list-style-type:none; margin:50px 0 100px 15px; padding:0; } #menu li { float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100; } #menu li dl { position:absolute; top:0; left:0; } #menu li a, #menu li a:visited { text-decoration:none; } #menu li dd { display:none; } #menu li:hover, #menu li a:hover { border:0; } #menu li:hover dd, #menu li a:hover dd { display:block; } #menu li:hover dl, #menu li a:hover dl { padding-bottom:20px; } #menu table { border-collapse:collapse; padding:0; margin:-1px; font-size:1em; } #menu dl { width: 150px; margin: 0; padding: 0; background: #006666 url(images/bottom.gif) no-repeat bottom left; text-align: center; cursor:pointer; } #menu dt { margin:0; padding: 5px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444; } #menu .one { background: #006666 url(images/top.gif) no-repeat top left; } #menu .two { background: #006666 url(images/top.gif) no-repeat top left; } #menu .three { background: #006666 url(images/top.gif) no-repeat top left; } #menu .four { background: #006666 url(images/top.gif) no-repeat top left; } #menu .five { background: #006666 url(images/top.gif) no-repeat top left; } #menu dd { margin:0; padding:0; color: #fff; font-size: 1em; background: #006666; text-align:left; } #menu dd.last { border-bottom:1px solid #006666; } .bmenu dt a, .bmenu dt a:visited { display:block; color:white; } .bmenu dd a, .bmenu dd a:visited { color:#FFF; text-decoration:none; display:block; padding:4px 5px 4px 20px; background: #006666 url(images/arrow.gif) no-repeat 10px 10px; width:125px; } .bmenu dd a:hover { background: #99CC00 url(images/arrow_over.gif) no-repeat 11px 10px; color:#000; } </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div id="outer"> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin Top Banner ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div id="header"></div> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Top Banner ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Begin Top Nav ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div id="nav"> <ul id="menu"> <li> <dl class="bmenu"> <dt class="one"><a href="#">Attractions</a></dt> <dd><a href="#" title="#">Dining</a></dd> <dd><a href="#" title="#">Night Life</a></dd> <dd><a href="#" title="#">Shopping</a></dd> <dd><a href="#" title="#">Ammusements</a></dd> <dd><a href="#" title="#">Cultural Arts</a></dd> <dd><a href="#" title="3">Historic Sites</a></dd> <dd class="last"><a href="#" title="#">Fitness</a></dd> </dl> </li> <li> <dl class="bmenu"> <dt class="two"><a href="#">About</a></dt> <dd><a href="#" title="#">History</a></dd> <dd><a href="#" title="#">Transportation</a></dd> <dd><a href="#" title="#">Community Info.</a></dd> <dd><a href="#" title="#">Maps</a></dd> <dd><a href="#" title="#">Tours</a></dd> <dd class="last"><a href="#" title="#">Links</a></dd> </dl> </li> <li> <dl class="bmenu"> <dt class="three"><a href="#">Events</a></dt> <dd><a href="#" title="#">Sporting Events</a></dd> <dd><a href="#" title="#">Calendar</a></dd> <dd class="last"><a href="#" title="#">Festivals</a></dd> </dl> </li> <li> <dl class="bmenu"> <dt class="four"><a href="#">Conference Center</a></dt> <dd><a href="#" title="#">Conference Center</a></dd> <dd><a href="#" title="#">Sports Authority</a></dd> <dd class="last"><a href="#" title="#">Visitor's Bureau</a></dd> </dl> </li> <li> <dl class="bmenu"> <dt class="five"><a href="#">Accomodations</a></dt> <dd class="last"><a href="#" title="#">Hotels / Motels</a></dd> </dl> </li> </ul> </div> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Top Nav ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~ Begin Main Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div id="main"> Main Content </div> <!-- ~~~~~~~~~~~~~~~~~~~~~~~ End Main Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div id="clearfooter"></div> <!-- ~~~~~~~~~~~~~~~~~ Begin Footer / Copyright ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div id="footer">Footer</div> <!-- ~~~~~~~~~~~~~~~~~~~ End Footer / Copyright ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
