Margin Issues in IE7

HTML & CSS
1

Pages look great in Firefox and Safari.

Margin collapses above the footer and funky wrap below the photo.
http://robertbarnesdesign.com/UPLOAD/init_drRivera.html

Copy busts out of div in right hand column.
http://robertbarnesdesign.com/UPLOAD/aboutUs.html

Also, what would I base a new style on to delete the divider border on the last entry of the drop down menu of ABOUT US and INITIATIVES?
http://robertbarnesdesign.com/UPLOAD/index.html

Thanks.
Robert JJ

2

Set the image to display:block so that t text will start on a new line and not try to squeeze at the end.


p.last img{display:block}

IE has a habit of losing the last bottom margin in a series of elements so add the margin to the footer as well.


#footer {
    width: 400px;
    height: 20px;
    font: normal 10px Arial, Helvetica, sans-serif;
    color: #333;
    margin-left: 187px;
    clear: both;
[B]    margin-top:15px;[/B]
    }

Copy busts out of div in right hand column.
http://robertbarnesdesign.com/UPLOAD/aboutUs.html

You’ve set the height on the right column that isn’t big enough for the content. Just remove the height and let the content dictate how tall it needs to be.


#office_wrap {
    width: 162px;
  [B]  /*height: 530px;*/[/B]
    float: left;
    background: #84DCD1;
    padding: 10px;
    margin: 0 0 0 13px;
    }

Also, what would I base a new style on to delete the divider border on the last entry of the drop down menu of ABOUT US and INITIATIVES?
http://robertbarnesdesign.com/UPLOAD/index.html

Thanks.
Robert JJ

You could remove the border from the bottom of the list and place it on the top of the list instead and then shift it up 1px with a negative margin.


    font-size: 11px;
    color: #672320;
    width: 18em;
    height: 2em;
    padding-top: 3px;
    vertical-align: middle;
    text-align: center;
    line-height: 1.2em;
[B]    border:none;
    border-top: 1px solid #fff;[/B]
    margin-top:-1px;
    }
3

Paul O’B, Thanks again for your help. You Rock!
Robert JJ