[css-d] Screwed Layout in IE - Contnet area expanded, BG repeating.

[trystano]

Hi all,

I am in the middle of finalising my website/portfolio and have been 
predominatley designing in Firefox, and then using conditional IE statements to 
include styles that make adjustments for IE based browsers. However, my 
portfolio page in IE is a little bit screwed up. The content section seems 
expanded, and its background is beginning to repeat on the right, but I don't 
see what style is causing this. The website portfolio page can be found at 
http://www.reflectivestudios.co.uk/newsite/portfolio.html. The content area's 
correct size can be viewed at http://www.reflectivestudios.co.uk/newsite/ (or 
alternatively, look at the website in Firefox).

The CSS relating to the Posrtfolio page is as follows...
#content {
    width: 540px;
    background: url("../images/page.png") repeat-y;
    margin: 32px auto 0px auto;
}
#contenthelper {
    padding:20px 15px 0px 15px;
    margin:0 10px;
    background:url("../images/top_shadow.gif") top repeat-x;
}
#contenthelper p {
    /*margin: 10px 0;*/
}

/* ----- Portfolio Page ----- */
#in-progress_content {
    padding: 20px;
    text-align: center;
}

#content_wrap {
    position: relative;
    width: 600px;
}

#projects {
    float: left;
    width: 150px;
    height: 300px;
    overflow: auto;
    margin: 35px 0 10px 0;
    padding: 0px 0px 0 10px;
}

#projects ul {
    font: normal 10px/14px 'Lucida Grande','LucidaGrande',Lucida,Sans-Serif;
    color: #666;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#projects ul li {
    padding: 5px 0;
    margin: 0;
    list-style-image: none;
    display: block;
    width: 149px;
}

#projects ul li a {
    padding: 0;
    margin: 0;
    display: block;
    color: #666;
}

#projects ul li a:hover {
    padding: 0;
    margin: 0;
    display: block;
    color: #759AC4;
    background: none;
}

#portfolio {
    float: left;
    position: relative;background: url("../images/dotted_line_vert.gif") top 
left repeat-y; 
    width: 300px;
    top: 0;
    right: 0;
    padding: 0 0 0 10px;
    margin: -30px 0 0 10px;
}

#portfolio h1 {
    font: normal 18px arial, 'Times New Roman', Serif;
    line-height: 22px;
    color: #690101;
    padding: 0px 0 0px 0;
    margin: 20px 0 0 0;
}

#portfolio h3 {
    font: bold 10px/12px georgia, serif;
    color: #333;
    text-transform: uppercase;
    padding:10px 0 0px 0;
    margin: 0;
}

#portfolio p {
    font: normal 11px/16px 'Lucida Grande','LucidaGrande',Lucida,Sans-Serif;
    color: #666;
    padding: 2px 0 8px 0;
    margin: 0;
}
/* --- End Portfolio Page --- */

The problem may lie somewhere in the actual CSS file, so feel free to download 
that.

If anyone can help me identify the problem, so that I can eradicate it in my MS 
specific CSS file it would be great.

Thanks

Tryst
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/