SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin Issues in IE7

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Robert JJ View Post
    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
    Set the image to display:block so that t text will start on a new line and not try to squeeze at the end.

    Code:
    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.

    Code:
    #footer {
        width: 400px;
        height: 20px;
        font: normal 10px Arial, Helvetica, sans-serif;
        color: #333;
        margin-left: 187px;
        clear: both;
        margin-top:15px;
        }
    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.

    Code:
    #office_wrap {
        width: 162px;
        /*height: 530px;*/
        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.

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

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B, Thanks again for your help. You Rock!
    Robert JJ


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •