I've been playing around with CSS to try and learn how to use it. I made a simple photo site at <!-- m --><a class="postlink" href="http://johnbrintonhogan.com/">http://johnbrintonhogan.com/</a><!-- m -->
In all the browsers except IE it displays properly. When viewed in IE the content is pushed down instead of being at the top like it should be.
Here's the CSS:
html {overflow-y: scroll;}
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #663300;}
a:link, a:visited{
color: #666600;
text-decoration: none;}
a:hover{text-decoration: underline;}
.style3 {color: #000000;
font-family: "Courier New", Courier, mono;
font-style: italic;}
h1{
font: bold 120% Arial,sans-serif;
color: #000000;
margin: 0px;
padding: 0px;}
h2{
font: bold 114% Arial,sans-serif;
color: #000000;
margin: 0px;
padding: 0px;}
h3{
font: bold 100% Arial,sans-serif;
color: #000000;
margin: 0px;
padding: 0px;}
#pagecell1{
position:absolute;
left: 2%;
right: 2%;
width:95.6%;
background-color: #999966;
top: 50px;}
#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #999966;
border-right: 1px solid #666600;
font: small Verdana,sans-serif;}
#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #666600;}
#photoContent{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #666600;}
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #cc6633;
font-weight: normal;}
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #666600;}
#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;}
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
height: auto;}
html>body .feature {height: auto;}
.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;}
.feature img{
padding: 0px 10px 0px 0px;}
#siteInfo{
clear: both;
border-top: 1px solid #666600;
font-size: small;
color: #666600;
padding: 10px 10px 10px 10px;
margin-top: 0px;
text-align: center;}
#sectionLinks{
margin: 0px;
padding: 0px;}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #666600;}
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #999966;
border-bottom: 1px solid #000000;
background-color: #666633;
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #000000;}
#sectionLinks a:hover{
border-top: 1px solid #666600;
border-bottom: 1px solid #666600;
background-color: #666600;
background-image: none;
font-weight: bold;
text-decoration: none;}
and here's the html:
<!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=iso-8859-1">
<title>johnbrintonhogan.com : home</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"jbh.css" type="text/css">
</head>
<body>
<div id="masthead">
<h1 id="siteName">johnbrintonhogan.com <span class="style3">Photographic Works</span></h1>
</div>
<div id="pagecell1">
<div id="pageName">
<h2>Home</h2>
</div>
<div id="pageNav">
<div id="sectionLinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a><a href="photographs.html">Photographs</a><a href="links.html">Links</a><a href="contact.html">Contact</a></div>
</div>
<div id="content">
<div class="feature">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"spacer.gif" width="1" height="275"></td>
<td align="left" valign="top">
<h3>Welcome to johnbrintonhogan.com</h3>
<br>
<br>
<br>
<br>
<div align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/photographs/vacation/007.jpg" width="450" height="202" alt=""></div>
</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"spacer.gif" width="1" height="275"></td>
</tr>
</table>
</div>
</div>
<div id="siteInfo">©2004 johnbrintonhogan.com</div>
</div>
<br>
</body>
</html>Take the width="100%" out of the table.
Change:
#content{
float:left;
padding: 0px 10px 0px 0px;
margin:0px;
border-left: 1px solid #666600;}
#photoContent{
padding: 0px 10px 0px 0px;
margin:0px;
border-left: 1px solid #666600;}cool it works. thanks so much.
In all the browsers except IE it displays properly. When viewed in IE the content is pushed down instead of being at the top like it should be.
Here's the CSS:
html {overflow-y: scroll;}
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #663300;}
a:link, a:visited{
color: #666600;
text-decoration: none;}
a:hover{text-decoration: underline;}
.style3 {color: #000000;
font-family: "Courier New", Courier, mono;
font-style: italic;}
h1{
font: bold 120% Arial,sans-serif;
color: #000000;
margin: 0px;
padding: 0px;}
h2{
font: bold 114% Arial,sans-serif;
color: #000000;
margin: 0px;
padding: 0px;}
h3{
font: bold 100% Arial,sans-serif;
color: #000000;
margin: 0px;
padding: 0px;}
#pagecell1{
position:absolute;
left: 2%;
right: 2%;
width:95.6%;
background-color: #999966;
top: 50px;}
#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #999966;
border-right: 1px solid #666600;
font: small Verdana,sans-serif;}
#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #666600;}
#photoContent{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #666600;}
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #cc6633;
font-weight: normal;}
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #666600;}
#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;}
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
height: auto;}
html>body .feature {height: auto;}
.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;}
.feature img{
padding: 0px 10px 0px 0px;}
#siteInfo{
clear: both;
border-top: 1px solid #666600;
font-size: small;
color: #666600;
padding: 10px 10px 10px 10px;
margin-top: 0px;
text-align: center;}
#sectionLinks{
margin: 0px;
padding: 0px;}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #666600;}
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #999966;
border-bottom: 1px solid #000000;
background-color: #666633;
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #000000;}
#sectionLinks a:hover{
border-top: 1px solid #666600;
border-bottom: 1px solid #666600;
background-color: #666600;
background-image: none;
font-weight: bold;
text-decoration: none;}
and here's the html:
<!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=iso-8859-1">
<title>johnbrintonhogan.com : home</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"jbh.css" type="text/css">
</head>
<body>
<div id="masthead">
<h1 id="siteName">johnbrintonhogan.com <span class="style3">Photographic Works</span></h1>
</div>
<div id="pagecell1">
<div id="pageName">
<h2>Home</h2>
</div>
<div id="pageNav">
<div id="sectionLinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a><a href="photographs.html">Photographs</a><a href="links.html">Links</a><a href="contact.html">Contact</a></div>
</div>
<div id="content">
<div class="feature">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"spacer.gif" width="1" height="275"></td>
<td align="left" valign="top">
<h3>Welcome to johnbrintonhogan.com</h3>
<br>
<br>
<br>
<br>
<div align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"/photographs/vacation/007.jpg" width="450" height="202" alt=""></div>
</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"spacer.gif" width="1" height="275"></td>
</tr>
</table>
</div>
</div>
<div id="siteInfo">©2004 johnbrintonhogan.com</div>
</div>
<br>
</body>
</html>Take the width="100%" out of the table.
Change:
#content{
float:left;
padding: 0px 10px 0px 0px;
margin:0px;
border-left: 1px solid #666600;}
#photoContent{
padding: 0px 10px 0px 0px;
margin:0px;
border-left: 1px solid #666600;}cool it works. thanks so much.