Menu
I’ve been playing around with CSS to try and learn how to use it. I made a simple photo site at [url]http://johnbrintonhogan.com/
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:
[code=php]
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:
[code=php]
<!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=”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=”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=”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=”/photographs/vacation/007.jpg” width=”450″ height=”202″ alt=””></div>
</td>
<td><img src=”spacer.gif” width=”1″ height=”275″></td>
</tr>
</table>
</div>
</div>
<div id=”siteInfo”>©2004 johnbrintonhogan.com</div>
</div>
<br>
</body>
</html>