hey guys am teaching myself html and css and have found something I'm not sure how to fix.
I have a 3 page website I'm playing with using exactly the same html on all 3 pages except the title and all 3 linking to the same css sheet yet the index page is smaller than the other pages when viewed in a browser.
edit- in IE they are the same in FF they are different
When I open the navbar image in a photo viewer it is the index page that has the wrong size and the other 2 match the the photo viewer proportions of the image.
html- the navbar & title images are both 714px wide and the background is 780px by 1000px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>New Project - Contact Me</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body id="container">
<!-- Curriculum heading -->
<table style="width: 780px; margin-top: 40px; border: 1px solid; cellpadding; 0px; cellspacing: 0px">
<tr><td>
<img src="title.gif" alt="title">
</td></tr>
</table>
<!--navbar -->
<table style="width: 780px; margin-top: 40px; border: 1px solid; cellpadding; 0px; cellspacing: 0px">
<tr><td>
<a href="index.html"><img src="1.gif" alt="navigationBar" border="0px"></a><a href="contact me.html"><img src="2.gif" alt="navigationBar" border="0px"></a><img src="3.gif" alt="navigationBar"><img src="4.gif" alt="navigationBar"><img src="5.gif" alt="navigationBar">
</td></tr>
</table>
</body>
</html>
all 3 html pages have the same html as i cut and past from the index page
css code
/*
html {
background-color: #888888;
}*/
body {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 780px;
}
#container {
margin-top:0px;
margin-bottom: 0px;
background-image: url('bg2.png');
background-position: top center;
height: 1000px;
background-repeat: no-repeat;
text-align: center;
}
all 3 are linked to the same css page
any ideas would be greatly appreciated.