jjj
jjj

Reputation: 93

Extra space between Banner and Nav Menu

The banner image in the header is 130 pixels tall, but it says the header in total is 135 pixels. I can't find where this is happening. Where is this extra space coming from?

<!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" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Taft Power Equipment</title>
        <link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <!--[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="style-ie.css" />
        <![endif]-->
        <script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
        <script src="js/jquery.horizontalNav.js"></script>
        <script src="js\jquery-migrate-1.2.1.js"></script>
        <script>
            // When document is ready...
            $(document).ready(function() {
                $('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
                $("#main-content").load("home.html");
            });
        </script>
        <script>
            $(document).ready(function() {
                $("#home").click(function() {
                    $("#main-content").load("home.html");
                });
                $("#work").click(function() {
                    $("#main-content").load("work.html");
                });
                $("#blog").click(function() {
                    $("#main-content").load("blog.html");
                });
                $("#about").click(function() {
                    $("#main-content").load("about.html");
                });
                $("#contact").click(function() {
                    $("#main-content").load("contact.html");
                });
                $("#parts").click(function() {
                    $("#main-content").load("parts.html");
                });
                $("#people").click(function() {
                    $("#main-content").load("people.html");
                });
            });
        </script>
        <script>
            $(function() {
                $("button").button()
                    .click(function(event) {
                    event.preventDefault();
                });
            });
        </script>
        <script>
            function showParts(str) {
                if (str == "") {
                    document.getElementById("results").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("results").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
                xmlhttp.send();
            }
        </script>
        <script>
            function showPeople(str) {
                if (str == "") {
                    document.getElementById("results").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("results").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
                xmlhttp.send();
            }
        </script>
    </head>

    <body>
        <div id="page-wrap">
            <div id="inside">
                <div id="header">
                    <img src="images/taft_banner_960_blackandwhite.png" />
                </div>
                <div id="menu">
                    <nav class="horizontal-nav full-width horizontalNav-notprocessed">
                        <ul>
                            <li><a href="#" id="home">Home</a>

                            </li>
                            <li><a href="#" id="work">Work</a>

                            </li>
                            <li><a href="#" id="blog">Blog</a>

                            </li>
                            <li><a href="#" id="about">About</a>

                            </li>
                            <li><a href="#" id="contact">Contact</a>

                            </li>
                            <li><a href="#" id="parts">Parts Look Up</a>

                            </li>
                            <li><a href="#" id="people">People</a>

                            </li>
                        </ul>
                    </nav>
                </div>
                <div id="main-content"></div>
                <div id="footer">
                    <p>&copy Copy Right Taft Power Equipment Corp</p>
                </div>
            </div>
    </body>

</html>

* {

    margin: 0;

    padding: 0;

}

html, body {

    margin:0;

    padding-top:0;

    height:100%;

}

p, li {

}

a {

}

b {

}

table {

    border-collapse: collapse;

    /* 'cellspacing' equivalent */

}

table th {

    font: 1.5em Tahoma;

    border: 3px solid #0e7079;

    border-radius: 6px;

    padding: 0em 1em 0em 1em;

}

table td {

    font: 1.3em sans-serif;

    border-radius: 1px;

    border: 0px solid #0e7079;

    padding: 0 1em 0 1em;

}

h1 {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

h2 {

    font: 1.8em Tahoma, sans-serif;

    color: green;

    margin-bottom: 10px;

}

ul {

    margin-left: 0px;

}

img {

    border: none;

}

/* ========================================================================================== */

#page-wrap {

    !margin: 10px auto;

    display: inline;

}

#inside {

    width: 960px;

    margin: 0 auto;

    background: blue;

    min-height:100%;

    position:relative;

}

#searchbar {

    width: 30%;

    background: #747474;

    border: 1px solid red;

    display: inline-block;

}

#results {

    background: #4c4c4c;

    min-height: 100px;

    width:50%;

    display: inline-block;

    border-radius: 6px;

    border: 1px solid #0e7079;

}

#results b {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

#main-content {

    margin-bottom: 10px;

    padding:10px;

    padding-bottom:30px;

    /* Height of the footer */

}

#header {

}

#menu {

}

#left-sidebar {

    width: 150px;

    float: left;

    padding-left: 15px;

    padding-top: 20px;

}

#footer {

    background: #000000;

    text-align: center;

    padding-top: 0px;

    color: white;

    position:absolute;

    bottom:0;

    width:960px;

    height:30px;

    /* Height of the footer */

}

/* ========================================================================================== */

.horizontal-nav {

    background: #efefef;

    border-radius: 6px;

}

.horizontal-nav ul {

    background: #ff4505;

    float: left;

    text-align: center;

    border-radius: 6px;

    border: 0px solid #0e7079;

    margin-left: 0px;

}

.horizontal-nav ul li {

    float: left;

    border-left: 1px solid #0e7079;

}

.horizontal-nav ul li:first-child {

    border-left: 0 none;

}

.horizontal-nav ul li a {

    display: block;

    padding: 10px 20px;

    color: #fff;

    border-top: 1px solid rgba(255, 255, 255, 0.25);

    border-left: 1px solid rgba(255, 255, 255, 0.25);

    text-decoration: none;

}

.horizontal-nav ul li:first-child a {

    border-left: 0 none;

}

.horizontal-nav ul li a:hover {

    background: #12808a;

}

.horizontal-nav ul li:first-child a {

    border-top-left-radius: 6px;

    border-bottom-left-radius: 6px;

}

.horizontal-nav ul li:last-child a {

    border-top-right-radius: 6px;

    border-bottom-right-radius: 6px;

}

http://jsfiddle.net/5b48H/

Thank you!

Upvotes: 4

Views: 1270

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders. source

header img
{
    display: block;
    margin: 0;
    padding: 0;
}

I believe setting line-height: 1; on the image will also fix this problem, especially if it's in a block by itself. source

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241278

Either add display:block or vertical-align:top to the img element.

jsFiddle example - display:block

#header img {
    display:block;
}

jsFiddle example - vertical-align:top

#header img {
    vertical-align:top;
}

Note - The default vertical-align property is baseline. Changing it to top, middle or bottom fixes the issue.

Upvotes: 1

Related Questions