Previous Message
Next Message

Screwed Layout in IE - Contnet area expanded, BG repeating.

Sent by Trystano on 5 February 2006 15:03


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-REMOVED]]
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/
Previous Message
Next Message

Possibly related: