Jump to content

Getting an invisible margin to go away...


Recommended Posts

 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?><p style='background-color: black; margin: 0px; padding: 0px;'>Daily Sports Guide</p></div></body></html>


body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: red; border: 1px solid white; text-align: left; padding: 0px 0px 0px 0px; height: auto;} #header { margin: 0px; padding: 0px; width: 100%; height: 150px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: green; width: 500px; height: 141px; text-align: right; }


#nav, #nav ul { /* all lists */padding: 0;margin: 0;list-style: none;line-height: 1;}#nav a {color: white;text-decoration: none;background-color: black;text-align: center; display: block;width: 100px;}#nav a:hover {display: block;background: blue;width: 100px;}#nav li { /* all list items */float: left;width: 100px; /* width needed or else Opera goes nuts */} #nav li ul { /* second-level lists */position: absolute;border: 1px solid white;background: black;width: 100px;left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */} #nav li ul ul { /* third-and-above-level lists */margin: -1em 0 0 10em;} #nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;} #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */left: auto;}


<div id="header"><!-- The Header --> <div id="hcolumnLeft"><img src="img/logo.jpg"></div> <div id="hcolumnRight"><!-- Suckafish navigation menu --><ul id="nav"> <li><a href="#"> </a></li>  <li><a href="index.php">Home</a></li>  <li><a href="profile.php">My Profile</a> <ul>  <li><a href="myguide.php">My Guide</a></li>  <li><a href="bars.php">DSG Sports Bars</a></li>  <?php if($_SESSION['logged_in']) {echo "<li><a href=\"logout.php\">Logout</a></li>"; } else {echo "<li><a href=\"login.php\">Login</a></li>"; } ?></ul> </li>  <li><a href="aboutus.php">About Us</a></li> <li><a href="contactus.php">Contact Us</a></li> </ul><!-- End #nav --></div> </div><!-- End #header -->

I just am not able to determine why for some reason there is that small red margin there. I know it is part of wrapper but I can't figure out why it is there. As far as my code goes it shouldn't be because #header, #hcolumnLeft and #hcolumnRight all have no padding or margin area. What could be causing this problem? The url of the page is http://dailysportsguide.com/prototype/index.php. Thanks in advance for any comments or suggestions on how to deal with this red margin area of #wrapper!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...