Site background images are broken

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>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</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 &copy; 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&#37;;
}
#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;
}


Don’t code for compatibilty view :). Simple as that. That’s not the same as IE6/7/8 (either or)

Just don’t worry about c ompatibility view.

I coded it on my laptop, which runs IE8. I just checked on my PC, which runs IE7 and yup it’s broken.

I looked at my code again this morning. The HTML is fine. I made sure I did not have too many or too few close divs. They were correct. So I figured it had to be in my CSS code. For the left content and the right content I had width of 50%. The total width of the page is 963px. I changed the percent to px (was 481.5 when divided so used 481px) and now IE7 is rendering the pages correctly. My guess is that I cannot use both percents and px in the same code because it will break. I must use one or the other. If this is incorrect thinking, please let me know.

Well percentage widths on columns (if you do, for example, 50% and 50% columns) are open for rounding.

If you have a 50% and 50% width columns, if your parent is calculated at (for example) 799px, then browser rounding could make the 50%'s 400px each, or other cases like that (I hope you understand)

Normally you don’t want to make a fixed width site in px because it’s not very user friendly. Percentage sites are much better, for users, though harder for designers :wink: