SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bizzare background-image issue..

    Ok this is wierd! Whats happening is that the margin-top applied to the <ul> tag is actually moving the background image of the container div down with it! Does anyone know what could be causing this?

    I'm running ff3 on linux.

    code is below thanks!

    Code HTML4Strict:
    <div id="container">
      <ul>
          <li>sfsdf</li>
      </ul>
    </div>

    Code CSS:
    #categories {
      position:relative;
      background:url(images/new/category_top.png) no-repeat;
      }
      #categories ul {
        position:relative;
        margin-top:40px;
        }
        #categories ul li {
          color:green;
          font-size:14px;
          list-style-type:none;
        }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the normal action of margin collapse (see the Sitepoint Reference for more info). Rather than use a top margin on the <ul>, set a top padding on #categories.

  3. #3
    SitePoint Member zoloadang's Avatar
    Join Date
    Mar 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah,just as Centauri said,this is the normal action of margin collapsing;
    usually,you'll encounter the issue when the top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    This is the normal action of margin collapse (see the Sitepoint Reference for more info). Rather than use a top margin on the <ul>, set a top padding on #categories.
    Thanks, that worked! Though i feel that applying the margin the way i wanted shouldn't of caused that. oh well!

  5. #5
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jb_rhys View Post
    Thanks, that worked! Though i feel that applying the margin the way i wanted shouldn't of caused that. oh well!
    It can be a little backwards thinking at times, but if you remember it, it'll save a lot of headaches in the future. And you can help other people like you eventually!
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com


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
  •