Apologies if this question seems redundant, but none of the answers I found have resolved my issue.
All the margin, border, and padding settings are set to 0px. The main page div has margin-left and margin-right set to 15px on both sides. I have checked thoroughly and can't find any areas where I forgot to set one of these values to 0px.
For some unknown reason, the top div of the page refuses to align at the very top of the page.
If I insert plain text between the <body> tag and the
<div class="main">In the header.php file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<title><?php echo $title; ?></title>
<link href='css/main.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div class='main'>
<div class="header">
<img src="images/header1.png" id="header" />
</div>
<p class='heading_1'>Welcome to D T Hourn Photography</p>
<p class='bodycontent'>
Introduction blob
</p>
<p class='bodycontent'>
Albums:
</p>
In the css.main file:
html
{
border:0px;
padding:0px;
margin:0px;
}
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
background-image: url('../images/bg1.png');
background-attachment:fixed;
padding:0px;
margin:0px;
border:0px;
}
.main
{
top:0px;
margin-top:0px;
margin-right:15px;
margin-left:15px;
margin-bottom:0px;
border-top:0xp;
border-left: 2px outset #445566;
border-right: 2px outset #445566;
width:93%;
max-width:1400px;
background: rgb(222, 222, 222);
background-color:rgba(255, 255, 255, 0.6);
}
.header
{
border-bottom: 2px groove red;
margin:0px;
background-image:url('../images/header1.png');
background-size:100% 100%;
height:200px;
}
img#header
{
width:100%;
height:200px;
vertical-align: bottom;
border:0px;
padding:0px;
margin:0px;
}
.heading_1
{
font-family: Verdana, Arial, Helvetica, sans-serif;
height:1.5em;
font-weight: bold;
color: #000000;
}
.heading_2
{
font-weight: bold;
}
table
{
border:1px solid #0000ff;
padding:0px;
border-collapse:collapse;
background-color:#ffffff;
}
.tables_heading
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
background-color: #99ccff;
border-bottom:1px solid #0000ff;
}
Edit: I added extra code from the header.php file. If I enter plain text between <body> and
<div class="main">You can view the current state of the site (as it stands) at
The live version displays correctly in Firefox (at least on my computer), but not on IE or Google Chrome. It doesn't render as intended in any browser on my local machine.