SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems aligning two images

    Hi all. I have problems aligning in a design I'm working on at the moment which you can see here I have the main image as property of the body and one image as part from the footer. As you can see is the image in the footer shifted to the right. It looks to me like the margin: 0 on the left isn't working, while it is declared in the reset. Does someone see what I'm doing wrong, or should I take another approach all together.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work because you've set margins on body. If you remove those, it'll align properly.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    It doesn't work because you've set margins on body. If you remove those, it'll align properly.
    Mmm kohoutek? Where do I have margins on the body? This is the body in the CSS:

    Code CSS:
    body {
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 100%;
    	line-height: 1.1;
    	color: #696551;
    	background: #f4f5f6 url(../images/site/content.png) center top repeat-y;
    }
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,352
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    It seems to work if you remove width: 100% from
    Code:
    html, body {
        height: 100%;
        width: 100%;
    }
    I've only tested that in Firefox.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    Mmm kohoutek? Where do I have margins on the body? This is the body in the CSS:
    It's a browser default. You need to add this to your body styles to remove the default margins:

    Code:
    body {
      background: url("../images/site/content.png") repeat-y scroll center top #F4F5F6;
      color: #696551;
      font-family: Tahoma,Geneva,sans-serif;
      font-size: 100%;
      line-height: 1.1;
      margin: 0;
    }


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
  •