Hi,

I'm designing two sites, both with the same problem.

The first is here: http://www.nycamprepairs.com

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
}

I modified your code as follows:

For the css, I changed the main id to:

#main{
margin-top: 15px;
float: left;
}

I then removed the class from your last image on the html page

<div class="rel"><img src="http://www.nycamprepairs.com/images/diagampeg.png" alt="Ampeg" /></div>

Thanks so much. You saved me!

I wonder if you wouldn't mind answering why my code not working. Any help is appreciated.

Thanks for the help. I got nycamprepairs.com working in IE and Firefox, but one page still looks pretty lousy in Safari. But that one is OK for now.

My other site is having similar problems. It validates and looks fine in Firefox and Safari, but crazy in IE. If anyone feels like tackling it, here's the 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 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="Alex Sniderman, Scott Anthony, Wayne Kramer, MC5, Billy Ficca, Kevin Salem, Melissa Houston, Tyson Rogers, Jason Loewenstein, Guitar Rock, Guitar, Bass, Drums, Brooklyn, Rock and Roll, Excello Recording, Hugh Pool, New York, New York City, NYC, Nashville, Murfreesboro, Tennessee, Ann Arbor, Michigan" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Nu-Sonics</title>

<style type="text/css">
/*<![CDATA[*/
 table.c4 {width: 100%; color: black; font-weight: bold; padding: 0px; }
 h2.c3 {margin-left: 0px;}
 img.c2 {width: 100%; float: left; border-style: ridge; border-color: black; border-width: 1px;}
 img.c1 {width:65%;}

/*]]>*/
</style>
</head>
<body>
<div id="header"><!-- Start of page header -->
<a href="index.html"><img src="images/logo.gif" class="c1" alt="Nu-Sonics Logo" /></a></div>
<!-- End of page header -->
<div id="sidebar"><!-- Start of sidebar content -->
<a href="buy.html"><img src="images/cover_digipak.gif" class="c2" alt="CD Cover" /></a></div>
<!-- End of sidebar content -->
<div id="main"><!-- Start of main content -->
<p><img class="floatLeft" src="images/eurekaep.gif" width="200px" height="39px" alt="Eureka E.P." /></p>
<h1>is now available. Buy it <a href="buy.html">here!</a></h1>
<p>A shotgun wedding of the ringing hooks of Big Star and the rootsy, noisy grit of Neil Young &amp; Crazy Horse come together to create the sound of The Nu-Sonics The "Eureka" E.P.</p>
<img class="floatRight" src="images/cover_digipak1.png" width="360" height="246" alt="Cover Photo" />
<p>The "Eureka" E.P. showcases a versatile rock and roll band capable of thoughtful acoustic ballads ("Words No Good"), witty, punky rock ("Nice Guys"), and pure pop confection ("Say Hello, No Goodbyes").</p>
<p>Alex Sniderman's songs wouldn't pack the same punch without the tightly wound band. Houston's versatile drumming and Anthony's surefooted bass glue everything together seamlessly. The lean arrangements are filled out by Tyson Rogers (The Blueprint Project, Yo La Tengo, Chris Stamey) on keyboards, Rebecca Turner's soaring harmonies, Brooklyn troubadour John Pinamonti on guitar and mandolin, and topped with Sniderman's supple, confident vocals.</p>
<p class="last">The Nu-Sonics is a band of music lovers and lifers who want to share the fun of making good noise with good friends.</p>
<h3>"You guys have that Big Star vs. Crazy horse thing."<br />
-Jason Loewenstein (Sebadoh, The Fiery Furnaces)</h3>
</div>
<!-- End of main content -->
<div id="indexfooter"><!-- Start of page footer -->
<table border="0px" class="c4">
<tr>
<td><a href="index.html">home</a></td>
<td><a href="bio.html">bio</a></td>
<td><a href="buy.html">buy cds</a></td>
</tr>
</table>
</div>
<!-- End of page footer --><script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script><script type="text/javascript">
//<![CDATA[
_uacct = "UA-3430999-1";
urchinTracker();
//]]>
</script>
</body>
</html>

And here's the CSS:

/* stylesheet.css */

/* Page header style */
#header{
     height: 60px;
     width: 46em;
     text-align: center;
     padding: 15px;
     margin-left: 11em;
     margin-top: 0px;

}

/* Page footer style */
#footer{
     margin-top: 0em;
     margin-left: 2em; 
     height: 30px;
     width: 42em;
     text-align: center;

}

/* Index Page footer style */
#indexfooter{
     margin-top: 1em;
     margin-left: 15em; 
     height: 40px;
     width: 42em;
     text-align: left;
}


/* Style for images */
img{
   border: 0px;
   margin-bottom: 5px;
}

/* Add some margin space to main content */
#main{
       margin: 0em;
       /* margin-left must equal */
       /* total width of left sidebar */
       margin-left: 11em;
       padding: 15px;
       width: 46em;
       margin-top: 0px;
       text-align: left;
       height: 30em;
       /* I added the height value to push down the footer and cover photo */

}

/* Add some margin space to main content */
#last{
       margin: 1em;
       /* margin-left must equal */
       /* total width of left sidebar */
       margin-left: 11em;
}

/* Style for sidebar column */
#sidebar{
           border: 1px;
           float: left;
           display: inline;
           padding-top: 15px;
           margin: 1em;
           width:8em;
           height: 60em;
            /* 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/wood_bkgrnd.jpg");     
   background-repeat: repeat;   
   }

/* Downloads (documents) */
   .downdoc {
   font-size: 11px;
   color: #000000; /* black */
   font-weight: bold;
   text-decoration: none;
   text-align: center;
}

/* Index Page Cover Photo */
   div.mainphoto {
    width: 100%;
    text-align: right;
    }


/* Unvisited links (black) */
a:link{
   color: #000000; /* black */
   text-decoration: none;
}

/* Unvisited links (blue) */
.bluelink a:link{
   color: #0066CC; 
   text-decoration: none;
}

/* Hover links (white-bluelinks) */ 
.bluelink a:hover{
   color: #ffffff; /* white */
   text-decoration: none;
}


/* Visited links (black) */ 
a:visited{
   color: #000000; /* black */
   text-decoration: none;
}

/* Hover links (white) */ 
a:hover{
   color: #ffffff; /* 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: -35px;
   padding: 0px;
}

/* 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
}

If anyone has any suggestions, please let me know. Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.