I did the following
body {margin:0; padding:0;}
In IE it moved it to the top. In firefox I still have space at the top. What happened.
I have provided code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>jhg</title>
<style>
body
{
font-family: arial,tahoma;
font-size: .78em;
text-align: center;
line-height: 200%;
margin: 0;
padding: 0;
background-color:#CCCCCC;
}
#container
{
width: 747px;
text-align: left;
margin: 0 auto 0 auto;
background-color:white;
}
#header
{
width: 747px;
height: 198px
}
h1
{
background-image: url(images/logo.jpg);
width: 747px;
height: 198px
}
#menu
{
width: 747px;
height: 35px;
background-color:#990000;
}
#menu ul
{
text-align: center;
margin:0;
padding:0;
}
#menu li
{
float: left;
list-style: none;
text-transform: uppercase;margin: 8px 0 0 10px;
}
#menu li a
{
text-decoration: none;
color: white;
font-weight:200;
padding: 0 20px 0 0 ;}
#menu li a:hover
{
border-top: 2px solid white;
border-bottom: 2px solid white;}
#content
{
float: right;
width: 450px;
padding: 0 0 0 10px;
}
#content span
{
color: #990000;
font-size:16px;}
#sidebar
{
width: 260px;
float: right;
}
#sidebar ul
{
margin: 0;
padding: 0;
}
#sidebar li
{
list-style:none;
border-bottom:1px solid #990000;
width: 200px;
}
#sidebar img
{
border: 1px solid gray;
padding: 2px;
margin-top: 30px;}
h3
{
color:#990000;
margin-top: 10px;}
h2
{color:#990000;
font-size: 15px;}
#footer
{
clear: both;
border-top: 3px green white;
width: 747px;
height: 50px;
background-color: #990000;
}
#footer ul
{margin:0;
padding:0;
}
#footer li
{margin-left: 50px;
list-style: none;
float: left;
}
#footer li a
{color:#CCCCCC;
text-decoration: none;
}
#footer li a:hover
{text-decoration:underline;}
</style>
</head>
<body>
<div id= "container">
<div id="header">
<h1></h1>
</div>
<div id="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul></div>
<div id="content">
<h3>Welcome</h3>
<P>
jgjlgjhkjh</P>
</div>
<div id="sidebar">
<img src="images/kiddrawing.jpg">
<h3>What we have planned</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Howard
body {margin:0; padding:0;}
In IE it moved it to the top. In firefox I still have space at the top. What happened.
I have provided code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>jhg</title>
<style>
body
{
font-family: arial,tahoma;
font-size: .78em;
text-align: center;
line-height: 200%;
margin: 0;
padding: 0;
background-color:#CCCCCC;
}
#container
{
width: 747px;
text-align: left;
margin: 0 auto 0 auto;
background-color:white;
}
#header
{
width: 747px;
height: 198px
}
h1
{
background-image: url(images/logo.jpg);
width: 747px;
height: 198px
}
#menu
{
width: 747px;
height: 35px;
background-color:#990000;
}
#menu ul
{
text-align: center;
margin:0;
padding:0;
}
#menu li
{
float: left;
list-style: none;
text-transform: uppercase;margin: 8px 0 0 10px;
}
#menu li a
{
text-decoration: none;
color: white;
font-weight:200;
padding: 0 20px 0 0 ;}
#menu li a:hover
{
border-top: 2px solid white;
border-bottom: 2px solid white;}
#content
{
float: right;
width: 450px;
padding: 0 0 0 10px;
}
#content span
{
color: #990000;
font-size:16px;}
#sidebar
{
width: 260px;
float: right;
}
#sidebar ul
{
margin: 0;
padding: 0;
}
#sidebar li
{
list-style:none;
border-bottom:1px solid #990000;
width: 200px;
}
#sidebar img
{
border: 1px solid gray;
padding: 2px;
margin-top: 30px;}
h3
{
color:#990000;
margin-top: 10px;}
h2
{color:#990000;
font-size: 15px;}
#footer
{
clear: both;
border-top: 3px green white;
width: 747px;
height: 50px;
background-color: #990000;
}
#footer ul
{margin:0;
padding:0;
}
#footer li
{margin-left: 50px;
list-style: none;
float: left;
}
#footer li a
{color:#CCCCCC;
text-decoration: none;
}
#footer li a:hover
{text-decoration:underline;}
</style>
</head>
<body>
<div id= "container">
<div id="header">
<h1></h1>
</div>
<div id="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul></div>
<div id="content">
<h3>Welcome</h3>
<P>
jgjlgjhkjh</P>
</div>
<div id="sidebar">
<img src="images/kiddrawing.jpg">
<h3>What we have planned</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Howard
