Rendering Issues in IE7

I have been designing a website and some of my pages are rendering differently in my browser (IE8) to that of the entire school which uses IE7. For example I have a news page where the text is indented correctly alongside the image which is what I want to happen. However in IE7 all the text is knocked down below the image and just makes it look untidier. Below is the CSS I am using for the site as a whole. Any help would be much appreciated. The location of the website is www.limavadygrammar.org.uk/test

body { font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults / padding: 0; text-align: center; / this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ 开发者_如何学运维color: #383F5C; background-color: #383F5C; }

.style2 {font-size: 12px} .style4 { color: #383F5C; font-size: 14px;

}

.style5 { color: #0066FF; font-size: 10px; }

/CSS for Main Container/

.thrColAbs #container { position: relative; /* adding position: relative allows you to position the two sidebars relative to this container / width: 955px; / using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar / background: #FFF; margin: 0 auto; / the auto margins (in conjunction with a width) center the page / border: 1px solid #000000; text-align: left; / this overrides the text-align: center on the body element. */ z-index:0; }

/CSS for Main Content Area/

.thrColAbs #mainContent {

margin-left:10px;
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-color:#FFF;}

/CSS for the area the buttons are located/

.thrColAbs #login { 
float:right;
clear:both;
height:auto;
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding:0px 0px;
padding-top:0px;
padding-bottom:25px;
z-index:1;
}

/*CSS for News Feed*/

.thrColAbs #news {  
float:right;
clear:both;
height:400px;
width: 240px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding:10px 15px;
} 

/*CSS for News Heading*/

#latestnews{}

/*CSS for div for the news and sub menus on other pages*/

#archive{
height:auto;
width: 65%; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
margin: auto;
padding: 10px 20px;
}   

/*CSS for Javascript Slideshow*/

#PhotosBackground {

position:relative;
overflow:hidden;
float: left;
z-index:0;
padding-bottom: 20px;

}

/*CSS for footer*/

#footer {

clear: both;
height: auto;
padding: 15px;
font-size: 10px;
border-top: 1px solid #efefef;
line-height: 18px;

}

#links {

clear: both;
height: auto;
padding: 15px;
font-size: 10px;
border-top: 1px solid #efefef;
line-height: 18px;
}

.style6 {

color: #383F5C;
font-weight: bold;
font-size: 12px;

}


/*CSS for indentation of images*/

#inpage-image { 
float:left; 
margin:5px; 
} 

/*CSS For Header*/

#header {height:182px;}


/*CSS for Main Drop Down Navigation Menu*/

#myjquerymenu {
height:auto;
position:absolute;
width: 100%;
clear:both;
z-index:1;
padding-bottom:0px;
left: 0px;
top: 185px;

}

/*CSS for text indentation on pages*/

#text-indent { 
margin: 0 200px 0 50px;
}

#text-indent p{
width:550px;
}

/*CSS for Fancy box*/

.gallery_image {

border: 1px solid #BBB;
padding: 2px;   

}

/*CSS for Collapsible Menu in Sidebar*/

.example_menu {
    font-size: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 160px;
}
.example_menu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.example_menu li {
    background-image: none;
    margin: 0;
    padding: 0;
}
.example_menu ul ul {
    display: inline;
}
.example_menu ul ul li a {
    padding-left: 20px;
    width: 118px;
}
.example_menu a {
    color: #fff;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-left: 0;
    padding: 2px 2px 2px 17px;
    width: 121px;
}
.example_menu a.expanded {
    background: #012D58 url(collapse.gif) no-repeat 3px 50%;
}
.example_menu a.collapsed {
    background: #012D58 url(expand.gif) no-repeat 3px 50%;
}

.example_menu a:hover {
text-decoration:none;       
}

.example_menu ul a {
    background: #fff;
    border-top: 2px solid #fff;
    color: #0066FF;
    text-decoration:none;
    display: block;
    font-weight: normal;
    padding: 2px 2px 2px 10px;
    width: 128px;
}
.example_menu ul a:hover {
    background : #f5f5f5;
    text-decoration: none;
}
.example_menu li.active a {
    background: #fff;
}
.example_menu li.active li a {
    background: #e8e8e8;
}
.example_menu .footer {
    background: transparent url(footer.jpg) no-repeat 0 0;
    border-top: 2px solid #fff;
    height: 9px;
    margin: 0 0 10px 0;
    width: 142px;
}
.example_menu .footer span {
    display: none;
}

Thanks, Marc

With these things, my usual approach is this:

1. Write HTML and CSS against a reasonably standards-compliant browser (Firefox, Google Chrome, Opera, Safari should all be fine for this purpose).
2. Test on all these
3. Make additional stylesheets full of hacks and "wrong" things that make it work on IE but may break it on anything else
4. Use conditional comments to include the extra stylesheets in IE only (conditional comments are an IE-specific extension that looks like regular comment to other browsers)