Copy and paste text from notepad messes up css page layout

Recently started learning css and am trying to set up a testimonials page. Have a basic layout in html and css with text included to get layout how I want it. Now I’m trying to add actual content and the layout goes out of whack. Seems I can duplicate the content I’ve got as much as I like, but I can’t add anything new without the layout falling apart. I’ve tried cut and paste from notepad and typing copy in direct but the layout won’t accept it. Also I have a div for an absolute positioned photo which IE8 doesn’t recognize, showing the img tag content instead. Any help with either or both of these issues would be much appreciated. Thanks

google for IETester to use ie5,ie6,ie7,ie8 at the same time. The program occasionally crashes, but it’s very useful.

I’m using Firefox on a PC with vista. What’s happening is the form div is sitting on top of the first testimonial along with the top border of the footer div. When I check on IE8 I don’t have that problem (I have others but that’s for another day).

Thanks for the info. I’ll check it out.

Basically you can only use one version at once; but you can set up a virtual machine to test other versions of IE. There is a range of other options too, but it’s important to work out a viable system for testing your websites in the various browsers.

Have solved the problems. Made the “testimonial” divs position: relative and the menu ul/li.

Everything seems to display ok now in all the current browers including IE8. Don’t know if it’s possible to download and run IE6 or 7 to a Vista PC and check performance on them.

Want to thank you Ralph for the validation advice. Makes a big difference in identifying what works or doesn’t.

Each element on the page is positioned absolutely, which isn’t an ideal way to do page layout, as elements don’t flow nicely together. Still, the page layout looks ok to me on a Mac (using Firefox). What browser are you seeing problems in? The form and footer are appropriately placed, from what I can see.

Spent some time getting both xhtml and css validated as suggested (forgot I was trying to switch from html and had over 300 errors). So both are ok but I’m obviously not coding the css correctly because it’s still not giving me the layout I want. So here’s the css code. The problem seems to be with the positioning of the “form” and “footer” divs but could be more comprehensive than that. I’ve posted the page at http://www.fineartdecor.com/pu/people-unlimited-testimonials.html so you can see what’s going wrong. I’ve also picked up a glitch on the menu too since I fixed the html errors. Thanks, Doug.

CSS Code

/* Cascading Style Sheet */
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffffff;
margin: 0em;
padding: 0;
}

/* By the way, this is a comment */

#header {
position: absolute;
top: 0px;
left: 200px;
width: 40%;
margin-bottom: 0px;
background-color: #ffffff;
padding: 1em;
height: 94px;
}

#spanish {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 24px;
background-color: #630000;
}

#spanish p {
color: #ffffff;
background-color: #630000;
padding: 0px 10px 10px 10px;
text-align: right;
}

#spanish a {
color: #ffffff;
}

#hebrew {
position: absolute;
top: 41px;
left: 0px;
width: 150px;
height: 24px;
background-color: #630000;
}

#hebrew p {
color: #ffffff;
Background-color: #630000;
padding: 0px 10px 10px 10px;
text-align: right;
}

#hebrew a {
color: #ffffff;
}

#navigation {
position: absolute;
top: 50px;
left: 0px;
width: 150px;
height: 1200px;
background-color: #630000;
padding: 0px;
}

#menu {
position: relative;
top: 94px;
left: 20px;
width: 160px;
padding: 0px;
}

#menu p {
font-size: 11px;
background-color: #cccccc;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 6px;
color: #630000;
border-style: solid;
border-width: 1px;
border-color: #630000;
margin-top: -12px;
font-weight: bold;
}

#menu a {
color: #630000;
}

#sidebarwrap {
position: absolute;
top: 0px;
left: 75%;
width: 240px;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
padding-left: 5px;
}

#sidebar {
position: relative;
top: 0px;
width: 100%;
background-color: #ffffff;
border-style: solid;
border-color: #630000;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: solid 0px #630000;
padding-top: 0px;
padding-left: 5px;
}

#sidebar p {
font-weight: normal;
font-family:trebuchet ms,arial,helvetica,sans-serif;
font-size:12px;
text-align: left;
color:#000000;
padding: 5px;
}

#sidebar p:first-line {
font-weight: bold;
}

#bodywrap {
position: absolute;
top: 150px;
left: 100px;
width: 50%;
background-color: #ffffff;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
margin: 0 9em; /* setting top and bottom margin to 0 and right and left margin to 9em */
}

#contentwrap {
position: relative;
top: 20px;
width: 100%;
margin-top: 10px;
margin-bottom: 20px;
}

#testimonial1 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial2 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial3 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial4 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial5 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial6 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial7 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial8 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial9 {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#testimonial1, #testimonial2, #testimonial3, #testimonial4, #testimonial5, img {
float: left;
padding-top: 5px;
padding-right: 5px;
}

#testimonial6, #testimonial7, #testimonial8, #testimonial9, img {
float: left;
padding-top: 5px;
padding-right: 5px;
}

#form {
width: 100%;
margin-top: 20px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
padding-left: 5px;
}

#footer {
text-align: center;
border-top: solid 2px #630000;
padding: 10px;
margin-top: 100px;
}

p {
font-size: 12px;
font-family: trebuchet ms, arial, helvetica, sans-serif;
}

p:first-line {
font-weight: bold;
}

.intro {
text-align: left;
}

h1 {
color: #000000;
font-size: 2.25em;
margin-top: 0.5em;
margin-bottom: 0.5em;
font-weight: bold;
text-align: left;
font-family: garamond, georgia, “times new roman”, serif;

}

h2 {
color: #000000;
font-size: 1.25em;
margin: 0;
font-weight: bold;
text-align: left;
font-family: trebuchet ms,arial, helvetica, sans-serif;
}

h3 {
color: #999;
font-size: 1.25em;
}

img {
border-width: 0;
}

a {
color: #cc3300;
text-decoration: none;
}

a:active {
color: #cc3300;
text-decoration: none;
}

a:visited {
color: #cc3300;
text-decoration:none;
}

a:hover {
background: #e0e0e0;
}

strong {
font-style: italic;
text-transform: uppercase;
}

li {
color: #900;
font-style: italic;
}

table {
background-color: #ccc;
}

#photo {
position: absolute;
top: 0px;
left: 66%;
}

newsletter {
position: relative;
top: 0px;
left: 0px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
}

book {
position: relative;
top: 10px;
left: 0px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
}

#expressions-alive {
position: relative;
top: 10px;
left: 0px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
}

#charity {
position: relative;
top: 10px;
left: 0px;
border-top: solid 2px #630000;
border-left: solid 1px #630000;
}

#about {
position: relative;
top: 10px;
left: 0px;
border-left: solid 1px #630000;
}

Hi fineartdecor! Welcome to SitePoint. :slight_smile:

It sounds like there are some bugs in the CSS/HTML, so the best thing would be to post the code you are using so we can check it. You could also run it through a validator.

Also I have a div for an absolute positioned photo which IE8 doesn’t recognize, showing the img tag content instead.

Sounds like the path to the image isn’t right. Again, we could spot that if you post some code or a link to the site.