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 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;
}
Thank you!
Upvotes: 4
Views: 1270
Answers (2)
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
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
- How to remove the extra space above my navigation bar
- Remove white space above nav bar
- Additional space when creating navigation bar
- Cant remove padding between nav-bar and banner css
- Extra space next to menu?
- Space Between Nav
- How to remove space between <nav> and <header>
- Unwanted space around Nav
- Why is there space above this navigation bar
- Nav bar spacing