color is breaking css layout

[sae]

I am struggling with something. I want to make my text a redish color (#4C2611 according to photoshop) but when I add it to my css it breaks the site. Can I not use this color?

Here is my css

body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
}

.content-wrapper {
width: 750px;
margin-left: auto;
margin-right: auto;

}

.holder {
float: left;
border: 1px #cccccc solid;
width: 750px;
}

.top {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
height: 259px;
position: relative;
}

.top-home {
position: absolute;
width: 250px;
}

.top-menu {
color: white;
position: absolute;
bottom: 12px;
right: 0;
text-align: right;
padding-right: 20px;
font-size: 1.1em;
}

.middle {
float: left;
background-image: url(images/E3E5E6.jpg);
background-repeat: repeat;
width: 750px;
}

.middle-left {
float: left;
width: 330px;
}

.middle-right {
float: right;
border: 1px green solid;
width: 400px;
}

.content {
color: #4C2611

[tracknut]

Do you have a closing brace at the bottom of that css file?

Dave

[Reis]

add this:


;
}

[sae]

oh shoot...it didn't paste the whole css code. Here is all of it

body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
}

.content-wrapper {
width: 750px;
margin-left: auto;
margin-right: auto;

}

.holder {
float: left;
border: 1px #cccccc solid;
width: 750px;
}

.top {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
height: 259px;
position: relative;
}

.top-home {
position: absolute;
width: 250px;
}

.top-menu {
color: white;
position: absolute;
bottom: 12px;
right: 0;
text-align: right;
padding-right: 20px;
font-size: 1.1em;
}

.middle {
float: left;
background-color: rgb(227,229,230);
width: 750px;
}

.middle-left {
float: left;
width: 330px;
}

.middle-right {
float: right;
width: 380px;
padding: 1em;
}

.content {
color: rgb(76,38,17);
}

.bottom {
float: left;
width: 750px;
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
height: 44px;
}

.bottom-menu {
color: white;
font-size: 0.9em;
text-align: right;
padding-right: 25px;
}

.copyright {
float: left;
padding-top: 1em;
color: #cccccc;
font-size: 0.7em;
text-align: center;
width: 750px;
}

img {
border: none;
}

[sae]

and here is the page - http://jonnysjava.com/template

It looks alright in IE and FF but not in Safari 4