I have been working on a new site and everything was going fine. I checked it locally with IE7, IE8, Chrome, Firefox, Opera, and Safari. I even uploaded it and checked and everything was fine. I was trying to add a different nav and think that I screwed something up. I uploaded it again and IE7 is breaking it or the compatibility button on IE8 is breaking it. Whatever, I checked on Firefox and and the CSS and HTML code is error free. I don’t know what I did. Could someone go through my code and let me know what could be happening? I have set it up as 2 columns. The left column has a text box sliced into 3 sections and the right column has text boxes that are sliced the same.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Guitar Book - Teach Yourself How to Play the Guitar, The Easy Way!</title>
<meta name="keywords" content="guitar, self-help, guitar lessons, teach guitar, guitar theory, learn guitar" />
<meta name="description" content="Now it's easy to teach yourself how to play the guitar. Step by step lessons take you through everything you need to know to master the guitar at your own pace. " />
<link rel="stylesheet" type="text/css" href="css/easy.css" media="all" />
<style type="text/css">
<!--
a:link {
color: #FFF;
}
a:visited {
color: #D6D6D6;
}
a:hover {
color: #F00;
}
a:active {
color: #D6D6D6;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Easy Guitar Book</h1>
</div>
<div id="nav">
<ul>
<li><a href="index.html"><span class="redtext">Home</span></a> | <a href="about.html">About the Author</a> | <a href="purchase.html">Purchase</a></li>
</ul>
</div>
<div id="content_top"> </div>
<div id="content_mdl">
<div id="left_content">
<div id="left_txt_top"></div>
<div id="left_txt_mdl">
<p class="left">Have you always wanted to learn how to play the guitar? Lessons can be very expensive and time consuming. This ten lesson book walks you through only the most important aspects of learning how to play. Included are the most common chords played, popular strum and finger pick patterns, how to play scales, and the most basic and easy to understand theory. After teaching guitar now for several years at the high school level, I have designed this book for the individual that wants to save some money and learn on their own.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="left_txt_btm"></div>
</div>
<div id="right_content">
<div id="right_top_txt_top"></div>
<div id="right_top_txt_mdl"> <a href="purchase.html"><img src="images/book_cover.png" class="floatRight" border="0" alt="Easy Guitar Book cover" /></a>
<p>Visit the purchase page and either buy the hard copy or download in PDF format. </p>
</div>
<div id="right_top_txt_btm"></div>
<div id="right_btm_txt_top"></div>
<div id="right_btm_txt_mdl">
<p>Now it's easy to teach yourself how to play the guitar. Step by step lessons take you through everything you need to know to master the guitar at your own pace. </p>
</div>
<div id="right_btm_txt_btm"></div>
</div>
</div>
<div id="content_btm"> </div>
<div id="footer">
<p> Copyright © 2010 Easy Guitar Book. All Rights Reserved. Site design by<a href="http://foxdenwebsolutions.com"> Foxden Web Solutions.</a></p>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background:url(../images/bg.png);
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
margin-left: 30px;
}
p.left {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000;
margin-left: 20px;
margin-right: 10px;
}
img.floatRight {
float: right;
margin: 4px;
}
h1 {
text-indent: -9999em;
}
.redtext {
color: #ff0000;
}
#container {
width: 963px;
margin: 0 auto;
}
#header {
background:url(../images/header1.png) no-repeat;
height: 237px;
width: 963px;
}
#nav {
background:url(../images/nav_bg.png) no-repeat;
height: 40px;
width: 963px;
}
#nav li {
font-size: 25px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
display: inline;
margin-left: 300px;
text-decoration: none;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
}
#nav ul li a:hover {
color: #999999;
text-decoration: none;
}
#nav ul li a:active {
color: #D7D8E3;
text-decoration: none;
}
#content_top {
background:url(../images/main_top.png) no-repeat;
height:50px;
width: 963px;
}
#content_mdl {
background:url(../images/main_mdl.png);
width: 963px;
overflow:hidden;
}
#left_content {
float:left;
width: 50%;
}
#left_txt_top {
background:url(../images/main_txt_top.png) no-repeat;
width: 429px;
height: 25px;
margin-left: 35px;
}
#left_txt_mdl {
background:url(../images/main_txt_mdl.png);
width: 429px;
margin-left: 35px;
overflow: hidden;
}
#left_txt_btm {
background:url(../images/main_txt_btm.png) no-repeat;
width: 429px;
height: 25px;
margin-left: 35px;
}
#right_content {
float:left;
width: 50%;
}
#right_top_txt_top {
background:url(../images/right_txt_top.png) no-repeat;
width: 380px;
height: 33px;
margin-left: 65px;
}
#right_top_txt_mdl {
background:url(../images/right_txt_mdl.png);
width: 380px;
margin-left: 65px;
overflow: hidden;
}
#right_top_txt_btm {
background:url(../images/right_txt_btm.png) no-repeat;
width: 380px;
height: 33px;
margin-left: 65px;
margin-bottom: 25px;
}
#right_btm_txt_top {
background:url(../images/right_txt_top.png) no-repeat;
width: 380px;
height: 33px;
margin-left: 65px;
}
#right_btm_txt_mdl {
background:url(../images/right_txt_mdl.png);
width: 380px;
margin-left: 65px;
overflow: hidden;
}
#right_btm_txt_btm {
background:url(../images/right_txt_btm.png) no-repeat;
width: 380px;
height: 33px;
margin-left: 65px;
}
#content_btm {
clear: both;
background:url(../images/main_btm.png) no-repeat;
height: 75px;
width: 963px;
}
#footer {
clear: both;
background:url(../images/footer.png) no-repeat;
height: 80px;
width: 963px;
}
#footer p {
padding: 18px;
font-family: Arial, Helvetica, sans-serif;
padding-left: 40px;
color: #ffffff;
font-size: small;
}