PDA

Click to See Complete Forum and Search --> : No gap between header and page content

conman929
12-12-2008, 12:20 AM
I just started designing websites and I am making one for my class in college. I can't figure out why only in IE there is a gap between my header and my page content. Could someone help me get rid of the gap please?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>The BuckarooŽ</title>

<link href="navirollover.css" rel="stylesheet" type="text/css">
<link href="roundedbox.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="pagecentered">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666">
<tr valign="top" bgcolor="#FFFFFF">
<td width="200px" class="leftsidebar"></td> <!-- Left side tree texture -->

<td width="600px" height="1000px" class="centercontent"><img src="images/banner.jpg" alt="The Buckaroo">

<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td><a id="home" href="index.htm"></a></td>
<td><a id="trees" href="coinsbills.htm"></a></td>
<td><a id="acc" href="accessories.htm"></a></td>
<td><a id="about" href="about.htm"></a></td>
<td><a id="site" href="map.htm"></a></td>
</tr>
</table>

<h1>&nbsp;&nbsp;About Us</h1>

</td><!-- End of center table data -->

<td width="200px" class="rightsidebar"></td><!-- Right side tree texture -->
</tr>
</table>


</div> <!-- End of centercontent div -->
</body>
</html>

The CSS for rollover navigation
@charset "utf-8";
/* CSS Document */




#home
{
display: block;
height: 50px;
width: 110px;
background: url(images/buttons/homereg.gif) no-repeat 0 0;
}

#home:hover
{
background: url(images/buttons/homepress.gif) no-repeat 0 0;
}
#trees
{
display: block;
background: url(images/buttons/treesreg.gif) no-repeat 0 0;
height: 50px;
width: 110px;
}

#trees:hover
{
background: url(images/buttons/treespress.gif) no-repeat 0 0;
}
#acc
{
display: block;
height: 50px;
width: 160px;
background: url(images/buttons/accessreg.gif) no-repeat 0 0;
}

#acc:hover
{
background: url(images/buttons/accesspress.gif) no-repeat 0 0;
}
#about
{
display: block;
height: 50px;
width: 110px;
background: url(images/buttons/aboutreg.gif) no-repeat 0 0;
}

#about:hover
{
background: url(images/buttons/aboutpress.gif) no-repeat 0 0;
}
#site
{
display: block;
height: 50px;
width: 110px;
background: url(images/buttons/map.gif) no-repeat 0 0;
}

#site:hover
{
background: url(images/buttons/mappress.gif) no-repeat 0 0;
}

table {border: 0px}

The CSS for the layout
#pagecentered {margin-left: auto; margin-right: auto; width: 63em}

.leftsidebar {background-image: url(images/sidebar1.jpg)}

.rightsidebar {background-image: url(images/sidebar2.jpg)}

.centercontent {background-image: url(images/maincontentback.png)}

body {background-color:#666666; margin-top: 0px; margin-bottom:0px}

h1 {margin: 0px 0px 15px 0px; background-color:#006600; color: white}

#news {width: 300px; float: left; padding: 20px 10px 0px 45px}

#sponsors {width: 200px; float: left; padding: 20px 0px 0px 0px}

.moneypic {padding-left: 15px; padding-right: 10px; padding-top: 10px}

.quantity {margin: 10px 0px}

.price {color: #FF0000}

.moneychoice {margin-top: 50px}

tr .accessimg {vertical-align: middle}

.address {text-align:center; clear:left; padding-top: 15px}

.address img {border-width: 0px; padding-top: 10px}


Thanks in advance,

Matt
bejitto101
12-12-2008, 03:17 AM
Assuming by header you mean that banner image, try this in your CSS:

img{
vertical-align: bottom;
}

Edit: Out of curiousity, in college are they teaching you to use tables for layouts? Because that just ain't right... When I was taught about a year ago, everything was XHTML strict and tables were taboo.
conman929
12-13-2008, 01:35 PM
Well we are going through a Carey book I think the name was HTML and XHTML. We are reading it and doing a exercise on each chapter. The teacher didn't say not to use tables but in the book it did mention that using tables was becoming more and more frowned upon. My main problem making a website is positioning things and I used tables in some parts of the site because I couldn't figure out how to do it with just div tags. I would like to figure out how to eliminate tables though. Thanks for the response though, I'll have to try it when I get home.