SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning a div inside another div moves everything (using margins)

    Code:
    #top {
     width: 702px;
     height: 147px;
     background: url('banner.gif');
     color: black;
     padding: 0px;
     margin: 0px auto;
     border-style: solid;
     border-color: black;
     border-width: 0px;
    }
    #ads {
     margin-left: 205px;
     margin-top: 67px;
    }
    Code:
     <div class="top">
      <div id="ads">
    <!-- content of div here --> sdfsdf
      </div>
     </div>
    Problem: (in Firefox) I'm using the margins to position the 'ads' div, but what's happening is the 'top' div is also being moved. What's really odd though, is that the 'top' div is being moved DOWN, but not RIGHT. So it seems to ignore the margin-left but doesn't ignore margin-top?

    Also, just a note, the top div, and therefore the 'ads' div, are both at the top of the page. The top div starts at the top of the page and inside it is the 'ads' div, which should be positioned 205px from the left of the left edge of the 'top' div, and 67px below the top of the 'top' div (which is also the top of the page).

    I'm not sure what needs to be done. Any help is greatly appreciated!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This is the mozilla top margin bug where the outer element inherits the margin of its first child element.

    I find the easies way to defeat it is to give the outer element a top border which then makse mozilla behave.
    Code:
    #top {border-top:1px solid #fff; }
    If you colour it the same colour as the background then it won't notice.
    or use
    Code:
    border-top:1px solid transparent;

    Paul

  3. #3
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will 'transparent' work in all browsers?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Will 'transparent' work in all browsers?
    Nothing works in all browsers

    It validates ok and will work in modern browsers. It doesn't matter about older browsers anyway as its a fix for mozilla. Browsers that don't understand it will just ignore it and the layout will work regardless.

    Paul

  5. #5
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    England
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not worried about older browsers, just worried about IE, FF and Opera . Forget IE <5.5 and other oldie browsers - people should really update their browsers!

    Anyway, the top border method worked just fine, thanks very much!


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
  •