sepoto Posted August 9, 2012 Share Posted August 9, 2012 <!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> style.css 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; } suckerfish.css #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;} i_header.php <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 More sharing options...
DarkxPunk Posted August 9, 2012 Share Posted August 9, 2012 Give the header the same height as the other divs so 141px. Fixed it for me. 1 Link to comment Share on other sites More sharing options...
sepoto Posted August 9, 2012 Author Share Posted August 9, 2012 (edited) Brain freeze! Thanks! Edited August 9, 2012 by sepoto Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 9, 2012 Share Posted August 9, 2012 Don't forget. Always RE READ your code 10000000000000times Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now