PHPQuack Posted July 8, 2008 Share Posted July 8, 2008 Here is a link to the test page http://phpquack.awardspace.com/, the banner on top is sitting in it's on <div id="banner">, I set the background-color to black so to easily see the bottom gap that should not be there. Below that is the horizontal menu in it's own <div id="top-nav">. I can't see what is or is not missing that is causing the gap at the bottom only of the <div id="banner">? Here is the partial code for the css body { margin: 0; padding: 0; font-size: 95%; font-family: georgia, times, "times new roman", serif; color: black; background-color: white; } #container { width: 800px; margin: auto; } /* --------------------------------- */ #banner { background-color: black; } /* --------------------------------- */ #top-nav { background-color: rgb(255,223,164); text-align: center; padding: .3em 0; } #top-nav ul { margin: 0; padding: 0; list-style-type: none; } #top-nav ul li { display: inline; } #top-nav ul li a { padding: .6em 2em; text-decoration: none; color: darkred; } #top-nav ul li a:hover, a:active { color: white; background-color: green; border: 1px dotted yellow; Partial code to the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>Float Practice</title> <link rel="stylesheet" type="text/css" href="float.css"> </head> <body> <div id="container"> <!-- banner --> <div id="banner"> <img src="melonhead-logo.png" alt="MelonHead"> </div> <!-- top nav --> <div id="top-nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> Quote Link to comment Share on other sites More sharing options...
scottybwoy Posted July 8, 2008 Share Posted July 8, 2008 does your picture have transparency at the bottom, what browser are you using? divs can sometimes overlap, and your top-nav has a top padding of .3em try doing padding: 0 0 .3em 0; It may even be better to drop that div and give the id to the ul. i.e <!-- top nav --> <ul id="top-nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> Quote Link to comment Share on other sites More sharing options...
PHPQuack Posted July 8, 2008 Author Share Posted July 8, 2008 does your picture have transparency at the bottom, what browser are you using? divs can sometimes overlap, and your top-nav has a top padding of .3em try doing padding: 0 0 .3em 0; It may even be better to drop that div and give the id to the ul. No transparency in png file. Using firefox 2.0.0.15 I created a more simple html and css with a container div and one div for the image, and it still had that several pixel gap at the bottom only for whatever reason. I went back to some tutorial and noticed that it specified a height for a div using a similar image. So I added the same property and all seems fine. thnx 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.