Hi,
I'm designing two sites, both with the same problem.
The first is here:
The site looks great in Safari and Firefox on the Mac but in IE my content is somehow sent down to the bottom of the page. Both my CSS and HTML validates on the W3C Validator. Please help! Thanks to all!
Alex
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!-- Link to style sheet for this Web site -->
<meta name="keywords" content="John Charette, New York City, Amplifier Repair, Gutiar, Electric Guitar, Marshall, Fender, Peavey, Vox, Danelectro, Gibson, Les Paul, Excello Recording, Hugh Pool, New York, NYC, Amp Repair" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Charette Electronics</title>
<style type="text/css">
/*<![CDATA[*/
div.rel {position: relative}
/*]]>*/
</style>
</head>
<body>
<div id="header"><!-- Start of page header -->
<a href="index.html"><img src="images/charelec.png" alt="Charette Electronics Logo" /></a></div>
<!-- End of page header -->
<div id="sidebar"><!-- Start of sidebar content -->
<table border="0px">
<tr>
<td><a href="index.html">Home</a></td>
</tr>
<tr>
<td><a href="repairs.html">Repairs</a></td>
</tr>
<tr>
<td><a href="fab.html">Fabrication</a></td>
</tr>
<tr>
<td><a href="install.html">Studio Installation</a></td>
</tr>
<tr>
<td><a href="dirty.html">Dirty Fucker</a></td>
</tr>
<tr>
<td><a href="sale.html">For Sale</a></td>
</tr>
<tr>
<td><a href="links.html">Links</a></td>
</tr>
<tr>
<td><a href="direct.html">Directions</a></td>
</tr>
</table>
</div>
<!-- End of sidebar content -->
<div id="main"><!-- Start of main content -->
<p>John Charette has been a professional audio technician for two decades.</p>
<div class="rel"><p>With experience as a technician at studios including Platinum Island,<br />
<a href="http://www.electricladystudios.com">Electric Lady,</a> Media Sound, and currently <a href="http://www.excellorecording.com">Excello Recording,</a> Charette<br />
(as he is known to his friends) is a wizard with amplifiers, tape machines,<br />
recording consoles, and outboard gear of all makes and models.</p>
<p>John is also the designer of the <a href="dirty.html">Dirty Fucker,</a> an all hand-wired fuzz pedal.</p></div>
<div class="rel"><img class="floatLeft" src="images/diagampeg.png" alt="Ampeg" /></div></div>
<!-- End of main content -->
</body>
</html>
Here's the CSS:
/* stylesheet.css */
/* Page header style */
#header{
height: 72px;
width: 504em;
text-align: left;
margin-left: 11em;
}
/* Page footer style */
#footer{
margin-top: 0em;
margin-left: 2em;
height: 30px;
width: 42em;
text-align: center;
}
/* Style for images */
img{
border: 0px;
}
/* Add some margin space to main content */
#main{
margin-right: 10em;
/* margin-left must equal */
/* total width of left sidebar */
margin-left: 11em;
padding: 15px;
width: 46em;
margin-top: 0px;
text-align: left;
position: relative;
}
/* Style for sidebar column */
#sidebar{
border: 1px;
float: left;
display: inline;
padding-top: 15px;
margin: 1em;
width:8em;
height: 60em;
text-align: right;
font-weight: bold;
/* Total width is 10em */
}
/* Body text and page background */
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: black;
text-align: left;
width: 46em;
background-image: url("images/ac151959.jpg");
background-repeat: repeat;
}
/* Unvisited links (black) */
a:link{
color: #000000; /* black */
text-decoration: none;
}
/* Visited links (black) */
a:visited{
color: #000000; /* black */
text-decoration: none;
}
/* Hover links (white) */
a:hover{
color: #999999; /* white */
text-decoration: none;
}
/* Active links (black) */
a:active{
color: #000000; /* black */
text-decoration: none;
}
/* Level 1 headings */
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
}
/* Level 2 headings */
h2 {
margin: 1px;
margin-top: 2em;
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: left;
text-decoration: none;
font-style: italic;
}
/* Level 3 headings */
h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
text-align: right;
margin-left: 8em;
margin-top: 3em;
font-style: italic;
}
/* Level 3 headings */
.topmargin h3 {
font-family: Arial, Helvetica, sans-serif;
color: #0066CC;
font-style: italic;
margin-top: 5em;
margin-left: 0em;
}
/* Float image to left of paragraph */
img.floatLeft{
float: left;
margin-right: 5px;
margin-bottom: 14em;
padding: 0px;
position: relative;
}
/* Float image to right of paragraph */
img.floatRight{
float: right;
margin-left: 10px;
padding: 0px;
}
/* Center image between margins */
div.center{
width: 100%;
text-align: center
}
